Vue3项目使用SVG图标

GitHub代码地址:GitHub - seapack-hub/seapack-template: seapack-template框架

一,前置工作

(一)安装依赖 vite-plugin-svg-icons

vite-plugin-svg-icons 的优点
预加载: 在项目运行时就生成所有图标,只需操作一次 dom
高性能: 内置缓存,仅当文件被修改时才会重新生成

npm install vite-plugin-svg-icons -D

(二)配置

在vite.config.ts中进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

在main.ts文件中引入

// 本地SVG图标
import 'virtual:svg-icons-register'

二,使用

(一)封装组件

创建一个SPIcon组件,封装svg。避免重复编码

<template>
  <svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}">
    <use :xlink:href="symbolId" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
import {computed} from 'vue'
const props = defineProps({
  //图标大小
  size:{
    type:[Number,String],
    default: '16px'
  },
  //图标颜色
  color:{
    type:String,
    default:"#606266"
  },
  //图标前缀,默认icon
  prefix:{
    type:String,
    default:'icon'
  },
  //图标名称
  name:{
    type:String,
    default:""
  }
});
const symbolId = computed(()=>`#${props.prefix}-${props.name}`);
</script>

<style scoped lang="scss">

</style>

注意: symbolId 的值需要与 vite.config.ts中配置的保持一致。
image.png
最终symbolId的值格式为#icon-svgName

(二)组件内使用

使用封装好的组件
image.png

(三)对应svg文件

svg图标名称
image.png

三,效果

image.png

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中使用SVG图标,可以采取以下几种方法: 1. 使用Vue插件:可以使用一些常见的Vue插件,如vue-svg-iconvue-fontawesome,通过npm安装插件,然后在Vue项目中引入插件并使用SVG图标组件。具体的使用方法可以参考插件文档。例如,可以使用以下代码安装并使用vue-svg-icon插件: ```javascript npm install vue-svg-icon ``` ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VueSvgIcon from 'vue-svg-icon'; const app = createApp(App); app.use(VueSvgIcon); app.mount('#app'); ``` 然后,在Vue模板中使用SVG图标组件,并指定图标名称: ```html <template> <div> <svg-icon name="icon-name" /> </div> </template> ``` 2. 使用CSS背景图:可以直接在项目使用SVG图标的代码,并通过CSS控制图标的大小和样式。例如: ```html <svg style="width: 10px; height: 10px"> <use href="#icon-shanchu"></use> </svg> ``` 3. 直接在Vue模板中插入SVG图标代码:可以将SVG图标代码直接复制到Vue模板中,并根据需要添加样式和属性。例如: ```html <template> <div> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" /> </svg> </div> </template> <style> .icon { width: 24px; height: 24px; fill: currentColor; } </style> ``` 4. 封装为Vue组件:可以将SVG图标封装为Vue组件,以便在应用程序中多次使用。创建一个新的Vue组件,并在模板中使用`<svg>`标签来插入SVG图标代码。例如,创建一个名为`Icon`的Vue组件: ```html <template> <div> <Icon /> </div> </template> <script> import Icon from './Icon.vue'; export default { components: { Icon } }; </script> <!-- Icon.vue --> <template> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" /> </svg> </template> <style> .icon { width: 24px; height: 24px; fill: currentColor; } </style> ``` 以上就是在Vue 3中使用SVG图标的几种方法。具体选择哪种方法取决于你的项目需求和个人偏好。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值