vue中svg图标使用

在前端开发中，经常会用到svg图标，在vue开发的中，经常会借助一些第三方插件，经常用的有vue-svg-icon,基本使用步骤为：

1、安装插件（会提示没有安装xml-loader,只需要安装下xml-loader，重启下项目就可以解决报错）

npm install vue-svg-icon xml-loader -D

2、引入组件

import Icon from 'vue-svg-icon/Icon'

Vue.component('Icon', Icon);

3、在项目src目录下创建svg文件夹（必须）

4、使用svg图形

<Icon name="close" scale="2"></Icon>

但是有时候存在用的svg图形不标准（不是svg图标，图片转svg图形），vue-svg-icon解析不了，可以将svg当做一个普通的图片引入

类似于:

<img src="xxx.svg">

在普通浏览器上是可以正常显示的，但是在IE下，可能就解析不了，需要采用以下兼容的写法，才能正常显示：

<svg width="250" height="48">
    <image xlink:href="../svg/logo.svg" src="svg.png" width="250" height="48"/>
</svg>

 

转载于:https://www.cnblogs.com/gerry2019/p/10275175.html