图标使用新姿势- react 按需引用 svg 的实现

更新日期: 2019-06-18阅读: 3002标签: 图标

前言

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:

  • 用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。
  • saas:引入 svg 文件,通过 react-svg-loader 将其包裹成一个 react 组件使用。
  • 到店购:引入 svg 文件,通过 svg-sprite-loader 将所有 svg 图标处理成 svg 雪碧图的方式使用。

这几种使用方式各有千秋,下面谈一谈他们的优缺点:)

用户平台的使用方式【简单】,不需要手动引入每个 svg 文件,缺点是字体图标不如 svg 文件【可扩展性好】,同时为了引入一个图标引入一个完整的字体图标也会带来一定冗余。

而其他两个组的问题在于【图标的引入】以及【管理】方面,需要手动引入 svg 文件,当然优点也非常可观。

这里明确一个事实:svg 图标的综合表现是远大于字体图标的,从 antd 从 3.9.0 的更新就可以看出来。

摘自官方文档


antd 的图标使用体验一直很好,比如下面的代码就可以定义一个 home 图标

<Icon type="home" />

不需要事先引入任何资源 ,只需要指定 type = "home" 就可以使用。但是 antd 没有解决一个问题,那就是如何做到图标的按需引用?

摘自官方文档


即便是这里提到的 webpack 插件 也不过是图标改成了后置引入,并没有解决图标的按需引用问题。

当然 antd 不好优雅的这个问题是由它的使用方式决定的(合理猜测),作为一个流行的组件库,antd 在引入新的技术的同时又要照顾之前使用者的使用体验,不可避免的会出现一些瑕疵。这是可以理解的,不过换成我们普通业务开发而言,我们没有必要去追求太过完美的开发体验,做出略微的牺牲即可实现【既保持 antd Icon 一样的使用方式,又按需引用了 svg 文件】,怎么实现呢?


如何处理 svg

svg-sprite-loader 是一个在 webpack 中应用比较广泛的 svg 处理库,它可以将代码里引入的 svg 文件合并到一起,然后以 svg symbol 的方式使用,关于它的使用方式网上有大量的文章,所以本文不会再描述它如何使用,请读者自行查阅,

值得一提的是,介绍此 loader 的的文章中,一般都会附带如何一次性引入项目中需要的所有 svg 的方法,那就是利用 webpack 的 require.context api,这个 api 可以获取一个特定的上下文,主要用来实现自动化导入模块,所以为了不再每个模块中一一写 import 'xxx.svg 这样的语句,使用这个 api 是有必要的。

借助 require.contet 和 svg-sprite-loader 能够使图标开发体验上升一个档次,也能配合 React 组件实现类似 antd Icon 的使用方式。

但是这种使用方式存在一个缺点,那就是【如何避免引入不必要的 svg】,要知道 require.contet 可不会区分哪些 svg 是真正需要的,当然对于个人项目而言,我们可以给一个页面固定一个文件夹存在真正需要的 svg 文件,但是对于多页面的 repo 而言,我们无法也没必要给每一个页面都设置一个专门存放该页面需要的 svg 的文件夹。

作为一个挑剔的程序员,我需要一种更智能更自动化的方式去引入我真正需要的 svg 图标。


思路分析

现在要解决的问题是我需要在写下类似以下代码的时候:

<Icon type="close" />

有种工具能同时在文件中帮我 import 一个 close.svg 。

比如下面的代码:

import Icon from './Icon.jsx';

Reactdom.render(<Icon type="close"/>);

经过处理后变成这样:

import Icon from './Icon.jsx';
import './assets/close.svg'

ReactDOM.render(<Icon type="close"/>);

想一想,之前使用过什么工具?会自动帮我们引入我们所需要的代码呢?

答案是: babel-plugin-transform-runtime ,一个自动帮前端工程师导入 polyfill 的 babel 插件,

以下是官网介绍

Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals

所以,参考 babel-plugin-transform-runtime 的原理和作用 ,我们想要自动导入一个 svg,也可以借用 babel-plugin 实现。


实现原理

熟悉 babel 的同学,应该知道 babel 插件作用原理,是通过对转化成 ast 的 js 代码做一些更改、替换之类的操作,不熟悉的同学可以点 这里 了解一下 babel 插件是如何开发的。

以前文我们提到的这一句代码 <Icon type="close"/> 为例,它经过 babel 转化后的 ast 长这个样子


转化成 json 会更清晰一些:

{
 "expression": {
    "type": "JSXElement",
    "start": 0,
    "end": 20,
    "openingElement": {
      "type": "JSXOpeningElement",
      "start": 0,
      "end": 20,
      "attributes": [
        {
          "type": "JSXAttribute",
          "start": 6,
          "end": 18,
          "name": {
            "type": "JSXIdentifier",
            "start": 6,
            "end": 10,
            "name": "type"
          },
          "value": {
            "type": "Literal",
            "start": 11,
            "end": 18,
            "value": "close",
            "raw": "\"close\""
          }
        }
      ],
      "name": {
        "type": "JSXIdentifier",
        "start": 1,
        "end": 5,
        "name": "Icon"
      },
      "selfClosing": true
    },
    "closingElement": null,
    "children": []
    }
  }

因为用的是 Jsx 语法,所以这个表达式的 type 是 JSXElement , 同时设置了了 props.type的值为 close , 所以他会有个 name 为 type 而 value 为 close 的 JSXAttribute .

我们在 babel plugin 中可以拿到上述的分析结果,自然也知道了这条语句产生的作用是:

  1. 我写下了一个 type 为 close 的 Icon Component ,
  2. 我希望它能够放一个 close.svg 在这里

所以我们可以 new 一个 Set() 对象,将当前 close 这个关键词存放进去, 为什么用 Set ,因为 Set 中的对象是不想等的,免去重复添加关键词然后再去重的必要。

代码演示:

function plugin({ types: t }) {
  return {
    visitor: {
      Program: {
        enter(path, state) {
          state.svgSet = new Set();
        }
      }
    }
  };
}

在初次访问整个语法树的时候,创建一个 Set 对象,注意 svgSet 一定要挂在 state 上。

然后借用 babel plugin 分析此文件内的所有 JSXElement ,直到整个文件的代码被处理完毕,这样我们就能拿到一个装满了所有关键词的 Set 对象。

代码片段:

function plugin({ types: t }) {
  return {
    visitor: {
      Program: {
       ...
      },
      JSXElement(path, state) {
        const {
          openingElement: {
            attributes
          }
        } = path.node;
        attributes
          .forEach(({ name, value }) => {
            // 判断 name.name 是否等于 "type" 或者是其他设置好的关键词
            state.svgCache.add(value.value);
          });
      }
    }
  };
}

最后,将 Set 里存放的 svg ,遍历之后,用 babel 工具库生成如下的语句:

import 'xxx.svg'

然后插入到此文件的最顶端,剩下的事情就交给 webpack 以及其他 loader 处理了。

我已经将上述代码封装了一个 npm 包 ,欢迎大家下载和体验,当然目前还比较简陋,源码和详细文档也将在不久后发布。

还有 vue 版本的工具也在开发中。


后记

这篇文章实现的 babel 插件原理并不复杂,记录下来希望能够帮助到大家:遇到项目中的问题的时候可以参考社区的实现来解决。最后欢迎大家关注酷家乐前端团队,可以找我私聊或者内推,我的邮箱:titian@qunhemail.com

代码参考:babel-plugin-transform-runtimebabel-plugin-import

工具使用:在线预览 ast

原文  https://webfe.kujiale.com/babel-plugin-jsx-svg-import/ 

 

链接: https://www.fly63.com/article/detial/3768

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!