基于Vue & SVG 的 icon 解决方案-白红宇

基于Vue & SVG 的 icon 解决方案

阅读量：5757 次

发布时间：2019-06-18

本文共 1717 字，大约阅读时间需要 5 分钟。

项目中图标的解决方案

一般项目中的图标解决方案有如下几种:

设计师提供 png 格式的图标;

没有设计师提供图标, 需要我们自己从 iconfont 上面找图标. 比如在做一些 CMS后台的时候.

自己找图标的一般步骤

打开 iconfont, 查找需要的图标, 点击加入购物车按钮.

把所有加入购物车的图标形成一个项目.

下载项目

在自己的项目中引入 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);

在需要使用图标的时候:


    或者

能不能实现? 能!

wc-svg-icon

基于 Vue & SVG 的 icon 解决方案

Install

npm i wc-svg-icon --save-dev// main.jsimport Icon from 'wc-svg-icon';import 'wc-svg-icon/style.css';Vue.use(Icon);备注: style.css 不强制要求引入, 不引入也可以正常运行, 只是 animation 参数无效.

Usage


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

Config

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

name:    图标的名称, 需要和 SVG 名相同, 不需要带路径.比如:
    fill:    SVG 图标的 fill 颜色, 默认会使用 SVG 原本的颜色, 如果你传递了 fill 属性, 则会使用你所传递的.比如:
     // 此时图标会呈现 red 色. height:    控制 SVG 图标的高度width:    控制 SVG 图标的宽度当然你也可以通过为 
    
      添加 class 的方式来设置 SVG 的样式. 
     之所以把 fill, height, width 单独提出来是因为这些对我而言经常用到.animation:    设置图标的动画效果, 比如:
     ... 当前只支持一种效果, 就是 rotate(旋转).其实这个玩意有点鸡肋, 建议如果需要 animation 效果的同学, 可以直接自己写 animation 或者引入 animate.css然后这样: