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框架中使用第三方字体图标库的配置方法，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
