Vue3项目使用SVG图标

烈风逍遥2024-04-11 18:09

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

一，前置工作

（一）安装依赖 vite-plugin-svg-icons

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

typescript 复制代码

npm install vite-plugin-svg-icons -D

（二）配置

在vite.config.ts中进行配置

typescript 复制代码

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

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

在main.ts文件中引入

typescript 复制代码

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

二，使用

（一）封装组件

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

vue 复制代码

<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>