vue-svgicon基本使用
在项目开发中,经常会用到svg图标,之前用的都是vue-svg-icon,最近在npm中搜索svg图标解析插件,发现vue-svgicon用的相对较多,对比以下,vue-svgicon用法较为灵活,方便,基本使用方法如下:
1、安装项目依赖
npm install vue-svgicon -D
2、在项目目录中引入svg图片(任意目录)
3、配置svg图标解析和输出路径
因为vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置:
    
4、在main.js中引入svgIcon组件,并且全局注册下
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
    tagName: 'svg-icon'
});
5、执行下npm run svg命令

可以看到项目中icons下面多了很多js文件
6、项目中具体使用如下:
<svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon> import '@/icons/logo'
vue-svgicon基本使用的更多相关文章
- 【转载】Vue项目中的文件/文件夹命名规范
		文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ... 
- Vue项目中的文件/文件夹命名规范
		Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ... 
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
		其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ... 
- svg在vue-cli3中的配置
		svg矢量图有时候在项目中用起来当然要比图片用起来好.之前没有用过svg,这次花了一点时间在项目中支持了svg的使用,个人感觉用起来还是没有直接用font class的爽,然后又改成font clas ... 
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
		目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ... 
- vue 添加旋转图片 修改css transform 值
		//点击放大图片并旋转图片 conponents组建 <template> <!-- 过渡动画 --> <transition name="fade ... 
- vue+vuex+axios实现登录、注册页权限拦截
		1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 1 BASE_API: '"http://192.168.xx.xx"', 2 ... 
- 在 React、Vue项目中使用 SVG
		在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ... 
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
		老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ... 
- vue中引入.svg图标,使用iconfont图标库
		阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ... 
随机推荐
- Windows Server 2012操作系统实用技巧
			1.在桌面显示“计算机” 方法一:控制面板中输入“桌面图标”搜索之后点击显示下面的“显示或隐藏桌面上的通用图标”: 方法二:WIn+R,在运行框中输入rundll32.exe shell32.dll, ... 
- ORACLE数据库中执行计划出现INTERNAL_FUNCTION一定是隐式转换吗?
			ORACLE数据库中,我们会使用一些SQL语句找出存在隐式转换的问题SQL,其中网上流传的一个SQL语句如下,查询V$SQL_PLAN的字段FILTER_PREDICATES中是否存在INTERNAL ... 
- How we implemented consistent hashing efficiently
			原文链接https://medium.com/ably-realtime/how-to-implement-consistent-hashing-efficiently-fe038d59fff2 我们 ... 
- IO - 同步 异步 阻塞 非阻塞的区别,学习Swoole有帮助
			同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?本文较长需耐心阅读,基础 ... 
- 【转载】ssh-copy-id三步实现SSH无密码登录和ssh常用命令
			ssh-keygen 产生公钥与私钥对 ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./s ... 
- 初步了解Node.js,学做简单的留言本案例
			在还没有正式的学Node.js的时候, 你们认为Node.js 对于前端来说是什么呢? 会认为Node.js 是框架? 认为这是类似Jquery的一个快速.简洁的JavaScript框架? 反正我自己 ... 
- ksoap2 android 调用WebService
			webService,soap,wsdl的基本概念? 详情请看维基百科 基于soap 1.1, soap 1.2 的请求和响应数据源 查找了很久都是基于json格式传输数据,但是最终还是找到了基于xm ... 
- 码农-->工程师
			微信公众号推送文章记录,侵删 一个猎人的比喻: 当土著拿到猎枪之后,他们射箭的技能退化严重,但因为食物更多了,厨艺有了长足的进展. 当你不再为一些问题担心之后,你就可以把注意力集中在另外一些问题上了. ... 
- VUE组件 之 Drawer 抽屉
			注:因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个. 一.源码地址 https://github.com/imxiaoer/DrawerForVue 二.效果 ... 
- java 初学 :求 s=a+aa+aaa+aaaa+aa...a 的值,其中 a 是一个数字。几个 数相加由键盘控制。
			import java.util.Scanner; public static void main(String[] args) { Scanner input=new Scanner(S ... 
