vue项目使用svg图片

时间 2019-12-07

标签 vue 项目使用 svg 图片繁體版

原文原文链接

1、下载SVG图片 vue

连接：Iconfont-阿里巴巴矢量图标库：http://www.iconfont.cn/webpack

选择而后下载图标web

二，把图标放到项目中npm

本人使用的是脚手架 vue init webpack-simple建立的项目json

3、安装插件，而且配置package.jsonsvg

参考连接：https://www.npmjs.com/package/vue-svgiconspa

npm install vue-svgicon --save-dev插件

配置好后，执行 npm run svg, 获得下图结果code

4、配置main.jsblog

import SvgIcon from 'vue-svgicon'
import './icons'   //引入svg-icon

Vue.use(SvgIcon, {
  tagName: 'svgicon'
})

5、在.vue文件中使用SVG

 <svgicon name="svg-home" width="200" height="200"></svgicon>

6、结果