vuecli3引入svg图标

1.添加插件
vue add svg-sprite

后面出现Y/N 选择Y就行

2.添加插件
npm install svgo svgo-loader --save-dev

然后就会看到自动新增的根目录文件vue.config.js和src/components/SvgIcon.vue,

3.在main.js里注册SvgIcon组件
import SvgIcon from '@/components/SvgIcon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
4.再在assets下创建icons文件夹,将所有的svg图标放进去,name就是svg的名字

如果要对svg设置大小,使用.svg-icon即可
.svg-icon{
width: 115px;
height: 115px;
}

你可能感兴趣的:(vuecli3引入svg图标)