前端模块化之图标使用

上一篇文章讲了css初始化，这一篇接着讲图标 icon 的使用。
现在网站中大多数，我们都有使用图标，这里推荐一个好的图标网站 iconfont，并且由于现在由于浏览器对于 SVG 的兼容性越来越好了，所以现代的图标大部分已经开始基于 svg 的方式了。
这个库对于 svg 图标进行了封装，能够方便使用图标。

安装

yarn add phui

使用

使用单色图标

在 iconfont使用帮助 里面的 symbol 引用中详细介绍了使用方式，首先需要引入图标集的文件。

1. 可以通过 script 方式引入，也可以通过 import 的形式引入。

   <script src="./icons.js" async></script> // import './icons.js'

2. 在 html 节点中添加节点用于渲染图标

   <svg id="info" class="info-icon"></svg>

   可以直接在节点上添加需要的 class。

3. 接下来就是正确使用了。

   import SingleIcon from 'phui/lib/Icon/SingleIcon'
   
   new SingleIcon('#info', 'info', 'icon-')

   SingleIcon 类接收3个参数：

   1. el: string | Element 必选，渲染图标的节点，可以是选择器也可以是 HTML 节点。
   2. icon: string 必填，使用的图标名称对应到添加图标入库时的名称，可以不包括前缀。
   3. prefix: string 选填，默认为 icon-，可以填写为自己添加入库时的前缀。

   prefix + icon 就是完整的入库时的名称了。

通过这种方式使用图标方便、简单；但同时也有不便的地方，所有的图标合在一起引入，不方便做按需引入，对于性能有影响的时候，不太好，同时这种方式对于图标如果只有一种方式，并且在添加入库的时候， path 节点没有通过 fill 填充颜色的，可以通过 css - color 来改变颜色；如果对于多色图标想要更改颜色就不行了。

图标的按需引入

库里面提供了以下图标方便按需引入。

依次分别为 InfoIcon、WarnIcon、SuccessIcon、ErrorIcon、LoadingIcon
添加渲染节点

<svg id="info"></svg>
<svg id="warn"></svg>
<svg id="success"></svg>
<svg id="error"></svg>
<svg id="loading"></svg>

渲染图标

import InfoIcon from 'phui/lib/InfoIcon'
import WarnIconfrom 'phui/lib/WarnIcon'
import SuccessIconfrom 'phui/lib/SuccessIcon'
import ErrorIconfrom 'phui/lib/ErrorIcon'
import LoadingIcon from 'phui/lib/LoadingIcon'

new InfoIcon('#info')
new WarnIcon('#warn')
new SuccessIcon('#success')
new ErrorIcon('#error')
new LoadingIcon('#loading')

有时候我们不希望渲染图标到节点，只想要图标字符串的时候，可以把第一个参数设置为空字符串

let infoIcon = new InfoIcon('')
console.log(infoIcon.toString())

如果想要为图标添加 class 样式，例如修改图标颜色[color]、修改图标大小[font-size]。

new InfoIcon('#info', { class: 'info-icon' }) // .info-icon{color:red,font-size:16px;}

自定义图标

我们也可以自定义图标

import Icon from 'phui/lib/Icon'

// 定义类继承Icon，并重写 _template 方法，返回图标的 svg-path
class MultiLoadingIcon extends Icon {
  /* 重写 _template 方法，返回图标的 svg-path，同时在path上加上fill属性，便于修改多色图标颜色 */
  protected _template() {
    return '<path d="M204.8 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#EBF2FC" p-id="2687"></path><path d="M819.2 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#B5D2F3" p-id="2688"></path><path d="M819.2 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#7FB0EA" p-id="2689"></path><path d="M204.8 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#4A90E2" p-id="2690"></path>'
  }
}

new MultiLoadingIcon('#multi')

以上代码渲染出的图标为：

如果在重写 _template 函数的时候，返回的 path 节点加上了 fill 属性，也支持改变颜色，例如：

new MultiLoadingIcon('#multi1', { fills: ['#5FB878', '#1E9FFF', '#FFB800', '#FF5722'] })

以上代码渲染出的图标为：