VUE 使用svg

选图标

1. 在Iconfont-阿里巴巴矢量图标库上把需要的图标添加至项目，并下载至本地。
2. 将下载的iconfont.js文件导入至自己的项目。

定义Icon组件

// src/common/Icon-svg.vue<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>

全局引入

// main.js全局引入iconfont.js和自定义的IconSvg组件import "./assets/icon/iconfont.js";import IconSvg from './common/Icon-svg.vue';Vue.component('icon-svg', IconSvg);

使用

直接使用
icon-class填iconfont上的后缀名，如图标名为icon-download，则填download

<icon-svg icon-class="download" />