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>

Logo

前往低代码交流专区

更多推荐