Taro框架使用第三方icon

我们在使用Taro开发小程序时，有时候需要用到ico图标，但是当Taro UI 自带的icon不能满足我们的要求时，我们需要导入第三方字体图标库。

如何导入呢？看步骤：

第一步：配置 postcss 小程序端样式引用本地资源内联,修改Taro的配置文件，主要是config下的dev.js和prod.js，代码如下：

/* config/dev.js */
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  // 小程序端专用配置
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        // 小程序端样式引用本地资源内联配置
        url: {
          enable: true,
          config: {
            limit: 10240 // 文件大小限制
          }
        }
      }
    }
  },
  h5: {}
}
/* config/prod.js */
module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {},
  // 小程序端专用配置
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        // 小程序端样式引用本地资源内联配置
        url: {
          enable: true,
          config: {
            limit: 10240 // 文件大小限制
          }
        }
      }
    }
  },
  h5: {}
}

第二步：编写字体图标库 css，icon.scss,这个文件直接放在src目录下 (以下代码为 demo，参考第三方库按照下面方式引入)，代码如下：

/* icon.scss */
@font-face {
  font-family: 'FontAwesome';
  /* 自行安装第三方字体图标库 */
  src: url('./assets/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('./assets/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('./assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('./assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* 根据第三方字体图标库编写 */
/* 举例：fa 就是 prefixClass 的值，下面的的图标 css class 命名都要用 fa- 开头  */
.fa {
  display: inline-block;
  /* 以下的 font 与上面 @font-face 的 font-family 要一致*/
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-clock:before {
  content: "f00c";
}

上面说的参考主要是，需要哪个icon就需要找到这个icon的编码，比如上面的clock的编码为fooc。

第三步：新建assets文件夹，将字体图标库的fonts文件放到assets文件夹下。

第四步：在app.js中引入icon.scss文件。

第五步: 使用 AtIcon,如何使用呢，看代码：

<View className='at-icon at-icon-settings'></View>
<View className='fa fa-clock'></View>
<View className='fa fa-address-book-o'></View>

或者在一些需要icon的组件中使用：

 <AtListItem
            hasBorder={false}
            title='标题文字'
            note='描述信息'
            arrow='right'
            iconInfo={{ size: 25, color: '#78A4FA', prefixClass:'fa' ,value: 'address-book-o', }}
          />

以上便是在Taro框架中使用第三方字体图标库的配置方法，希望对你有所帮助。