vue中如何动态使用svg

vue使用阿里多色svg图标

vue使用iconfont彩色图标，需要在main.js同时导入图标的css和js文件单色多色图标都能用

eslint对导入iconfont.js文件会报致命错误的话，解决方法

在.eslintignore文件过滤一下 iconfont.js文件 写上路径即可

vue动态使用svg图标

网上找了一下，基本上能解决的都是把每个svg分为独立的.svg文件

对于阿里图标批量下载整合到了的话，是不能这样使用的

直接使用又不能在xlink:href前面加冒号直接报错，加v-bind，不会渲染。

错误写法1

symbol: '#icon-houcangguanlisvg'

<svg class="icon svg-icon" aria-hidden="true">
	<use v-bind:xlink:href="symbol"></use>
</svg>

错误写法2

symbol: '#icon-houcangguanlisvg'

<svg class="icon svg-icon" aria-hidden="true">
	<use :xlink:href="symbol"></use>
</svg>

正确写法，新思路，使用v-html，一切都搞定

symbol: '<use xlink:href="#icon-houcangguanlisvg"></use>'
 
<svg class="icon svg-icon" aria-hidden="true" v-html="manageItem.symbol"></svg>