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>
vue中svg图标使用的更多相关文章
- DEV中svg图标的使用
0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...
- vue中的图标字体引入
网址:https://icomoon.io/app/#/select: 特点:样式多,免费 操作: 1.相中的,随便点,不要钱,generat fonts然后download,得到一个压缩文件,解压, ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
- Vue项目中使用svg图标
svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...
- vue中使用svg字体图标
1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...
- vue中,svg图标添加click事件,部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
- 在vue中使用svg sprite
概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...
- vue 中使用iconfont Unicode编码线上字体图标的流程
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...
- 如何在页面中使用svg图标
1.svg图标长啥样 注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色. <svg viewBox="0 0 1024 1024" v ...
随机推荐
- Django学习手册 - cookie / session
cookie """ cookie属性: obj.set_cookie(key,value,....) obj.set_signed_cookie(key,value,s ...
- js数组的操作push,pop,shift,unshift
push(args)可以每次压入多个元素,并返回更新后的数组长度. var oldArr=[1,2,3]; alert(oldArr.push(4,[5,6]))–>5(这里只会将[5,6]当做 ...
- Spring+CXF整合来管理webservice(服务器启动发布webservice)
Spring+CXF整合来管理webservice 实现步骤: 1. 添加cxf.jar 包(集成了Spring.jar.servlet.jar ),spring.jar包 ,serv ...
- EXT3.3.1在IE9 IE10click事件 失效怎么解决
各位Ext君有福了. var treePanel = new Ext.tree.TreePanel({ id:'treePanel_'+(menuIndex++),//让菜单id可控 title: t ...
- 【Python】【辅助程序】练手小程序:记录外网动态IP地址
练手小程序 程序作用:对IP实时记录: 1.定时获取外网IP,存储在本地文件中: 编写思路: 1)收集获取外网的API接口 http://bbs.125.la/thread-1383897 ...
- Linux内核调试方法【转】
转自:http://www.cnblogs.com/shineshqw/articles/2359114.html kdb:只能在汇编代码级进行调试: 优点是不需要两台机器进行调试. gdb:在调试模 ...
- C++:vector的用法详解
原文地址:http://blog.csdn.net/hancunai0017/article/details/7032383 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于 ...
- RMAN-06059(转)
change archivelog all crosscheck;
- 转载:Java高并发,如何解决,什么方式解决
原文:https://www.cnblogs.com/lr393993507/p/5909804.html 对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并 ...
- Maven介绍及安装与配置
一.Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...