Vue 2.0 的可变彩色 svg 图标方案 vue-svg-icon

MIT
JavaScript 查看源码»
跨平台
2016-12-29
cenkai88

vue-svg-icon 是轻量的 Vue 2.0 多色动态 svg 图标方案。

特点:

  • 可即时在illustrator中编辑svg图片

  • 可通过css的color属性动态地调整svg中某一部分的颜色

用法:

1. 安装

npm install vue-svg-icon --save-dev

2. 将svg图片放入src/svg

这里安利一个svg图片库iconfont

  • src/svg路径暂时不可配置

  • src文件夹应和node_modules在同一个文件夹下

3. 在项目的main.js入口引入vue-svg-icon和需要使用的svg文件名(不需扩展名)

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);  
Icon.inject('chameleon'); // the name of your svg pic

4. 在网页中使用icon标签就可以啦!

<icon name="chameleon" scale="20"></icon>

注意在illustrator中编辑svg图片时

  • 注意illustrator中所有的路径、矩形线段等等需转成复合路径再保存。

  • 第一次编辑完保存时,请选择"另存为",在"高级选项"中将"css属性"设置成演示文稿属性

  • 需要通过css动态设置颜色等部分请将填充色设为纯黑(#000000),如果想设置黑色但不受svg的color影响请将填充色设为(#000001)

  • 推荐svg尺寸为200*200

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

VUE-cli3使用 svg-sprite-loader

1、npm install svg-sprite-loader --save-dev 2、在Vue.config.js加入处理 svg 的 loader并删除默认配置中处理svg 3、新建icons文件夹,icons/svg存放svg,icons/index配置自动导入代码 im...

01/21 15:29
35
0
(5)添加svg支持

(5)添加svg支持 1 安装svg-sprite-loader cnpm install svg-sprite-loader --save svg-sprite-loader是一个webpack loader,可以将多个svg打包成svg-sprite。 2 配置svg-sprite-loader 我们发...

2018/11/13 09:02
10
0
一个简单的脚手架drop-cli、vue的组件库、移动端架构和pc管理后台模版

鉴于自己的经验和以往做过的项目,为了提高工作效率,特意整理了一下项目模版、vue组件库等模版并添加到一个自己封装的脚手架drop-cli中。不喜勿喷! drop-cli 一个简单的脚手架,可添加不同的...

2018/09/13 13:49
72
0
Vue项目History模式404问题解决

本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改。) 1.项目背景分析...

2018/11/01 22:12
10
0
vue实现的很炫酷的点赞效果, 支持三种icon, 多种属性 了解一下呗?

A Medium like clap button. Inspired by react-clap-button Github 地址 : https://github.com/AJLoveChina/vue-clap-button Install The recommended way is using npm npm install vue-cl...

2018/11/27 17:28
64
0
写了个控台UI同事说像刚毕业写的,我说其实我还没人家刚毕业的写的好呢!!!

工作中台基础UI 项目介绍 SeedWorkbenchUi 简洁的中台UI,vuejs 开发,组件化,模块化 快速预览 先来波图 预览 预览地址 预览部署在 Github Page ,如果您访问时由于网络原因卡在载入界面或者...

2018/09/19 18:05
36
0
vue+elementui升级传送门 + 升级体验

升级 如何从现有版本升级到element UI2.0 Element-ui升级2.0后初体验 element ui 1.4 升级到 2.0.11 Vue升级小记 升级体验 1、npm uninstall element-ui@1.3.7 2、npm install element-ui@2....

2018/04/24 13:50
38
0
前端那些事之插件

背景动画

2017/11/08 18:01
18
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部