引言
项目中有很多地方需要用到svg图标，Element Plus 组件库提供了一套常用的图标，但是往往不能满足需求，而网上比较全的就是阿里图标库，下面就介绍如何将阿里图标库中的svg图标引入到自己的项目中。
1. vite-plugin-svg-icons插件
本文的项目使用vue3+vite来构建，可以使用第三方的vite-plugin-svg-icons插件，来引入svg图标。
安装
安装vite-plugin-svg-icons插件
# npm npm i vite-plugin-svg-icons -D # yarn yarn add vite-plugin-svg-icons -D # pnpm pnpm 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({ // 图标文件夹为src/assets/icons iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: 'icon-[dir]-[name]', ], } }
在 src/main.ts 内引入注册脚本
import 'virtual:svg-icons-register'
2. 下载svg图标
1.在src/assets下新建icons目录，用于存放svg图标。
2.进入阿里图标库，找到想要的svg图标，下载svg。
3.将下载的svg放入图标目录src/assets/icons。
3. 使用svg图标
封装 svg-icon 组件
在 iconfont 官网上可以看到给出了使用svg的示例代码：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
如果每次都按照上面的方式使用，无疑是很麻烦的，可以将其封装成组件，在需要用到的地方直接引入即可。
在 components 目录下新建 SvgIcon 目录，然后新建index.vue 文件。
<template> <svg aria-hidden="true" class="svg-icon" :width="width" :height="height"> <use :xlink:href="symbolId" :fill="color" /> </svg> </template> <script setup> import { computed } from 'vue' const props = defineProps({ prefix: { type: String, default: 'icon' }, name: { type: String, required: true }, color: { type: String, default: '#333' }, width: { type: String, default: '16px' }, height: { type: String, default: '16px' } }) const symbolId = computed(() => `#${props.prefix}-${props.name}`) </script>
全局注册
在 main.ts 里面全局注册，不然每次引用图标的时候还得单独引入一次该组件。
import svgIcon from "@/components/SvgIcon/index.vue"; const app = createApp(App) app.component('SvgIcon', SvgIcon);
组件中使用
传入需要使用的图标名即可，同时还可以传入颜色，宽度和高度来定义样式。
<template> <SvgIcon name="phone" color="pink" width="100px" height="100px"></SvgIcon> </template>
效果
