vue3+vite，集成svg图标

1、为什么需要使用svg图标

svg图标的体积比我们图片资源体积小很多，并且能和图片实现效果一致，且灵活性更强(修改图标颜色)

2、下载、配置、使用

1.下载插件：

npm i vite-plugin-svg-icons -D

2.下载插件配置：

npm install fast-glob -D

【选择性下载】如果path报错请下载：

 npm i -D @types/node

3.在vite.config.ts中配置插件

这里需要注意一下：iconDirs的地址，也就是svg图标存储的地址一定要相对于

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId:'icon-[dir]-[name]'
    })
  ],
  resolve: {
    alias: {
      "@":path.resolve("./src") //相对路径别名配置，使用@代替src
    }
  }
})

4.入口文件导入：main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from '@/App.vue'
const app = createApp(App)
app.use(ElementPlus)

//svg插件需要配置代码
import 'virtual:svg-icons-register'
app.mount('#app')

5.然后在项目的src/assets目录下面创建一个icons目录，用于存储svg文件【这个目录结构与第3步注意点相对应】

6.创建一个phone.svg文件，里面内容通过阿里巴巴图标库复制的svg代码进行粘贴

• 注意点击的是复制SVG代码

阿里巴巴图标库地址
这一步省略

7.页面使用：

<template>
  <div>
    <h1>你好呀:{{ num }}</h1>
    <!-- 测试svg图标使用 -->
    <svg>
      <!-- xlink：href执行用哪一个图标，属性值务必是#icon-图标名字 -->
      <!-- use标签fill睡醒可以设置图标的颜色 -->
      <!-- 注意：如果fill改变不了颜色，要去svg文件里面把fill取消，这里才能够改颜色 -->
      <!-- 如果要设置svg大小，可以在svg标签上设置style行内样式 -->
      <use xlink:href="#icon-phone" fill="pink"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let num = ref(1);
</script>
<style scoped></style>

注意：如果颜色、宽度、高度、设置不成功，可以是svg文件里面有设置了，需要把svg里面设置的删除掉，才能在svg标签上设置

[拓展]封装一个全局的icon组件

注意：如果颜色、宽度、高度、设置不成功，可以是svg文件里面有设置了，需要把svg里面设置的删除掉，才能在svg标签上设置

1、创建组件

SvgIcon.vue

<template>
    <div>
        <svg :style="{width,height}">
            <use xlink:href="prefix + name" :fell="color"></use>
        </svg>
    </div>
</template>

<script lang="ts" setup>

defineProps({
    prefix:{
        type:String,
        default:'#icon-'
    },
    name:String,  //接收父组件传过来的图标名称
    color:{  //接收父组件传过来的图标颜色
        type:String,
        default:''
    },
    width:{  //接收父组件传过来的图标宽度
        type:String,
        default:'16px'
    },
    height:{  //接收父组件传过来的图标高度
        type:String,
        default:'16px'
    },
})

</script>

2、注册为全局组件
main.ts

import SvgIcon from '@/components/SvgIcon/index.vue'
app.component("SvgIcon",SvgIcon);

3、使用全局组件

组件中就可以直接使用这个全局的组件了

<template>
    <div>
      <svg-icon name="phone" color="red" width="100px" height="100px"></svg-icon>
    </div>
</template>