基于Vue & SVG 的 icon 解决方案

项目中图标的解决方案

通常项目中的图标解决方案有以下几种:

• 设计师 提供 png 格式的图标;
• 没有设计师提供图标, 须要咱们本身从 iconfont 上面找图标. 好比在作一些 CMS后台的时候.

本身找图标的通常步骤

1. 打开 iconfont, 查找须要的图标, 点击 加入购物车按钮.
2. 把全部 加入购物车 的图标造成一个 项目.
3. 下载项目
4. 在本身的项目中引入 iconfont.css, 以及放置下载下来的资源文件.

这种方式存在的问题:

• 须要新增图标的时候, 就蛮麻烦.
• 而后可能项目 A 使用到了图标 12345, 项目 B 使用到了图标 123. 此时若是项目 B 直接使用

A 项目的图标资源(由于懒啊), 就会致使 45 没有用到可是也加载了.

进一步的解决方案

每次都只下载一个 svg 文件下来.
这样不会形成图标冗余. 而后也不须要去从新下载项目.

经过这种方式下载下来的 svg 文件, 咱们有几种方式引入:

• 经过 img src="xx.svg" 的方式引入.//这样方式不能修改 svg 的颜色.
• 直接在 html 里面放 svg ? //太繁琐.
• 经过 <use> 的方式引入, 容许咱们经过 css 修改颜色, 可是也有问题:

要求咱们将全部的 SVG 图标合并成一个文件.
合并是一件事情, 合并以后, 就不能支持: 提早提供1000个图标, 在打包的时候只打包被使用到的.

指望的使用方式

经过这种方式引入:

import Icon from 'wc-svg-icon';
Vue.use(Icon);

在须要使用图标的时候:

<icon name="eye"/>
或者
<icon-eye/>

能不能实现? 能!

wc-svg-icon

基于 Vue & SVG 的 icon 解决方案

Install

npm i wc-svg-icon --save-dev

// main.js
import Icon from 'wc-svg-icon';
import 'wc-svg-icon/style.css';
Vue.use(Icon);

备注: style.css 不强制要求引入, 不引入也能够正常运行, 只是 animation 参数无效.

Usage

<icon name="xxxx"/>

这里的 'xxxx' 是你给定的 SVG 图标的名称. 好比说你如今有 10 个 SVG 图标, 你须要作的事情是:
1. 在 node_modules 里面找到 wc-svg-icon 目录
2. 把这 10个图标, 拷贝到 wc-svg-icon 目录中.

Config

icon 组件接受如下 props 配置选项:

name:    图标的名称, 须要和 SVG 名相同, 不须要带路径.好比:
<icon name="hello"/>

fill:    SVG 图标的 fill 颜色, 默认会使用 SVG 本来的颜色, 若是你传递了 fill 属性, 则会使用你所传递的.好比:
<icon name="hello" fill="red"/> // 此时图标会呈现 red 色. 

height:    控制 SVG 图标的高度
width:    控制 SVG 图标的宽度

固然你也能够经过为 <icon> 添加 class 的方式来设置 SVG 的样式. 
<icon class="foo"/>
之因此把 fill, height, width 单独提出来是由于这些对我而言常常用到.

animation:    设置图标的动画效果, 好比:
<icon animation="rotate"/>
... 当前只支持一种效果, 就是 rotate(旋转).
其实这个玩意有点鸡肋, 建议若是须要 animation 效果的同窗, 能够直接本身写 animation 或者引入 animate.css
而后这样:
<icon class="animated bounce"/>

一些问题

后续会不断的添加一些默认的 SVG icon, 因为打包的时候没有引入的icon 不会打包进项目, 因此icon的个数
不会影响到打包的体积大小.

若是你是但愿将本项目直接拷贝到本身的项目中使用

• 拷贝 src/wc-svg-icon 目录
• 安装 xml-loader 依赖:

npm i xml-loader --save-dev

• 全部的图标放在 wc-svg-icon/icons 下便可.

项目地址

wc-svg-icon