我们在使用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 删除。