1、在vue项目中使用
在没有其他组件库的情况下，需要安装第三方插件vue-svg-icon
步骤如下：
- 安装第三方插件
npm i vue-svg-icon - 在入口文件main.js引入
import Vue from from 'vue'
import Icon from 'vue-svg-icon/Icon.vue' //引入
Vue.component('icon', Icon) //注册
- 将下载好的svg资源放到src\assets\svg中
- 使用：
<icon name="example"></icon>
name的值为svg文件名
2、在vux组件库中的使用
官方文档链接：
https://doc.vux.li/zh-CN/components/x-icon.html
官方文档说的不够详细，具体使用如下：
-
将下载好的svg资源放在node_modules\vux\src\icons下
-
在组件中直接使用
<x-icon type="ios-arrow-up" class="icon-red"></x-icon>
type的值为svg文件名，class为你要自定义的样式
网友评论