vite vue引入svg图标及封装 (轻松上手)

Posted 2022-12-04 奥特曼　

svg特征

• Preloading所有图标都是在项目运行时生成的，只需要操作一次dom即可。
• 高性能内置缓存，仅在文件被修改时才会重新生成。

一、如何使用

1.安装vite-plugin-svg-icons插件

node version: >=12.0.0

vite version: >=2.0.0

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2.使用插件

vite.config.ts

import  VantResolver  from 'unplugin-vue-components/resolvers'
+import  createSvgIconsPlugin  from 'vite-plugin-svg-icons'
+import path from 'path'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [
    vue(),
    Components(
      dts: false,
      resolvers: [VantResolver( importStyle: false )]
    ),
+    createSvgIconsPlugin(
+      // 指定图标文件夹，绝对路径（NODE代码）
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
+    )
  ],

目录结构

 

3. 全局引入

main.ts

import 'virtual:svg-icons-register'

4. 使用

<svg aria-hidden="true">   
   <!-- #icon-文件夹名称-图片名称 -->
 <use href="#icon-login-eye-off" />
</svg>

二、封装

components/CpIcon.vue

<script setup lang="ts">
// 提供name属性即可
defineProps<
  name: string
>()
</script>

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-$name`" />
  </svg>
</template>

<style lang="scss" scoped>
.cp-icon 
  // 和字体一样大
  width: 1em;
  height: 1em;

</style>

提供使用时提示 类型 types/components.d.ts 

 import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' 
  interface GlobalComponents 
    CpIcon: typeof CpIcon
  

提示：有些图标可以根据 style 中 color 的值来设置颜色，图标是否有这个功能取决于 UI 做图片时否开启

使用： 

<cp-icon :name="文件名-名称"></cp-icon>

 <cp-icon :name="login-eye-on"></cp-icon>