1.选择喜欢的图标添加入库:
2.添加至项目(第一次使用直接新建一个项目再添加就可以了):
3.到我的项目页 ,Symbol下面点击生成代码:
4.将生成的代码复制,引用到index.html中:
<!--线上引用js文件-->
<script src="http://at.alicdn.com/t/font_3384739_nwkd1ljme1n.js"></script>
5.在components文件夹下创建icon-svg组件:
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
6.在main.js中引入并全局注册icon-svg组件:
//引入svg组件
import IconSvg from './components/icon-svg.vue'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)
7.在代码中使用(在官网里复制图标代码):
<icon-svg iconClass="position-fill"></icon-svg>