动态修改iconfont图标配色

引言

在 iconfont 图标字体库详细介绍一文中介绍了iconfont图标字体库的三种使用方法，分别是 1.unicode 引用 2.font-class 引用 3.symbol 引用。其中只有symbol引用的方式才能保留图标的色彩。但是如果我们想改变图标的颜色，那么该如何做呢？

解决方法

以React为例，在项目中，封装一个Icon组件，方便在其它需要用到iconfont图标时，传入name即可，Icon组件封装如下

export const Icon = ({
     name, ...reset }) => (
  <svg className="icon" {
   ...reset}>
    <use xlinkHref={
   `#icon-${
     name}`} />