Vuecli-3-使用SVG-的简单步骤

30次阅读

共计 385 个字符,预计需要花费 1 分钟才能阅读完成。

1. 在对应 vue 项目里添加插件

vue add svg-sprite

2. 再执行:

npm install svgo svgo-loader --save-dev

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

3. 在 main.js 里注册 SvgIcon 组件

// 引入 svg 组件
import SvgIcon from '@/components/SvgIcon.vue'    

// 全局注册 icon-svg
Vue.component('SvgIcon', SvgIcon)

4. 再在 assets 下创建 icons 文件夹,将所有的 svg 图标放进去,name 就是 svg 的名字,例如

<svg-icon name="aperture"></svg-icon>

好了,这样我们就可以愉快的使用 SVG 了。
最后,如果项目不能成功显示 SVG,可以尝试重新打开一次。

正文完
 0