vue中如何动态使用svg
vue使用阿里多色svg图标vue使用iconfont彩色图标,需要在main.js同时导入图标的css和js文件单色多色图标都能用eslint对导入iconfont.js文件会报致命错误的话,解决方法在.eslintignore文件过滤一下 iconfont.js文件 写上路径即可vue动态使用svg图标网上找了一下,基本上能解决的都是把每个svg分为独立的.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>
更多推荐
已为社区贡献3条内容
所有评论(0)