vue引用svg字体字体图标
2017-08-28 14:02
441 查看
1. 安装
npm install vue-svg-icon --save-dev
2. 将svg图片放入src/svg
这里安利一个svg图片库iconfont
src/svg路径暂时不可配置
src文件夹应和node_modules在同一个文件夹下
3. 在项目的main.js入口引入vue-svg-icon和需要使用的svg文件名(不需扩展名)
import Icon from 'vue-svg-icon/Icon.vue'; Vue.component('icon', Icon); //下 4000 面可以省略 Icon.inject('chameleon'); // SVG图片名字(无扩展名)
4. 在网页中使用icon标签就可以啦!
<icon name="chameleon" scale="20"></icon>
相关文章推荐
- vue中引用阿里字体图标的方法
- 制作自定义图标字体,html引用web svg矢量字体
- vue之placeholder中引用字体图标
- 字体图标的svg导入及寻找
- CSS: 引用字体文件,以及字体图标的使用
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- 解决IIS部署网站引用woff/woff2/svg字体报404错误
- Vue 第三方字体图标引入 Font Awesome
- 阿里字体图标使用方法——unicode引用
- MUI 引用阿里字体图标
- vue之图标字体制作
- 浅谈字体小图标font awesome,iconfont,svg各自优缺点
- vue项目引用bootstrap资源打包发生错误,loaders没有配置font字体文件
- 制作自定义图标字体,html引用web字体
- 如何在angular2中引用FontAwesome字体中的图标?
- font-face引用字体跨域导致font awesome图标无法正常显示
- svg图标转Iconfont字体图标
- 图标字体制作 -- 将SVG制作成图标字体文件,通过引入使用
- 阿里云字体图标的引用
- Vue 第三方字体图标引入 Font Awesome的方法