上一篇文章讲了css初始化，这一篇接着讲图标 icon 的使用。
现在网站中大多数，我们都有使用图标，这里推荐一个好的图标网站 iconfont，并且由于现在由于浏览器对于 SVG 的兼容性越来越好了，所以现代的图标大部分已经开始基于 svg 的方式了。
这个库对于 svg 图标进行了封装，能够方便使用图标。
安装
yarn add phui使用
使用单色图标
在 iconfont使用帮助 里面的 symbol 引用中详细介绍了使用方式，首先需要引入图标集的文件。
可以通过
script方式引入，也可以通过import的形式引入。<script src="./icons.js" async></script> // import './icons.js'在
html节点中添加节点用于渲染图标<svg id="info" class="info-icon"></svg>可以直接在节点上添加需要的
class。接下来就是正确使用了。
import SingleIcon from 'phui/lib/Icon/SingleIcon' new SingleIcon('#info', 'info', 'icon-')SingleIcon类接收3个参数：el:string | Element必选，渲染图标的节点，可以是选择器也可以是HTML节点。icon:string必填，使用的图标名称对应到添加图标入库时的名称，可以不包括前缀。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'] })以上代码渲染出的图标为：
