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 ...
随机推荐
- char *a与char a[n]的区别
char *a='ab';//a[2]一定为'\0',但是,a[5]这样的指针越界不会报错 char a[3] = {'a','a','a'};//a[3]属于越界,会报错 char b[5]={'b ...
- wFuzz使用帮助
******************************************************** * Wfuzz 2.0 - The Web Bruteforcer * ******* ...
- Jetson tk1 刷机后要做的几件事
参考简书文章: http://www.jianshu.com/p/997ede860d74 1. 查看Jetson TK1 L4T版本 head -n 1 /etc/nv_tegra_release ...
- 【转】Python之文件与目录操作(os、zipfile、tarfile、shutil)
[转]Python之文件与目录操作(os.zipfile.tarfile.shutil) Python中可以用于对文件和目录进行操作的内置模块包括: 模块/函数名称 功能描述 open()函数 文件读 ...
- AF_INET域与AF_UNIX域socket通信原理对比【转】
转自:https://www.cnblogs.com/lfxiao/p/9672797.html 1. AF_INET域socket通信过程 典型的TCP/IP四层模型的通信过程. 发送方.接收方依 ...
- .net active up mail 邮件发送
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- HTML学习笔记07-头部
HTML <head> 元素 <head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种met ...
- centos 命令和
一.远程工具 Window系统上 Linux 远程登录客户端有SecureCRT, Putty, SSH Secure Shell.TightVNC... 重点推荐一款 FinallShell,一般人 ...
- sqlserver 备份 与 还原
背景 真是够懒得,一看这个内容,如此简单.当时的想法就是网上教程一堆,全记下来有啥意思,只是记录了要点.不过写到这里,也就写个别的吧.sqlserver与Oracle比起来,我感觉有个重要差距就是存储 ...
- zabbix通过简单shell命令监控elasticsearch集群状态
简单命令监控elasticsearch集群状态 原理: 使用curl命令模拟访问任意一个es节点可以反馈的集群状态,集群的状态需要为green curl -sXGET http://serverip: ...