1. npm安装vite-plugin-vue-svg-icons
npm i vite-plugin-vue-svg-icons --save--dev
注意一下是:vite-plugin-vue
-svg-icons
不要下成:vite-plugin-svg-icons
2. 在vite.config中增加如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url';
import vitePluginVueSvgIcons from 'vite-plugin-vue-svg-icons';
import path from 'node:path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vitePluginVueSvgIcons({
dir: fileURLToPath(new URL("./src/assets/svg", import.meta.url)) //svg的存放目录
}),
],
resolve: {
alias: {
'@':path.resolve(__dirname,"./src")
}
}
})
关键代码:
import { fileURLToPath, URL } from 'node:url';
import vitePluginVueSvgIcons from 'vite-plugin-vue-svg-icons';
vitePluginVueSvgIcons({
dir: fileURLToPath(new URL("./src/assets/svg", import.meta.url)) //svg的存放目录
}),
存放svg的目录
3. main.js增加引用
import SvgIcon from 'svg-icon';
// 使用
app.component('SvgIcon',SvgIcon)
如何使用svg
进入阿里图标库,选中要使用的图标,点下载按钮,复制svg代码,在刚刚新建的svg文件夹下新建个文件,名字随意后缀加.svg
例如:test.svg
,打开创建的文件,将复制下来的svg代码粘贴进刚刚新建的svg文件下,ctrl+s保存。
最后直接在template中使用
<SvgIcon name="shandian" size="40" color="#fff"></SvgIcon>
如果想使用css
定义他的颜色,删除color
属性,在他的class
中使用fill
即可。