icon-font 图标
字体图标组件是一种用于在网页或应用程序中显示字体图标的UI组件。这样的组件通常提供了简单的接口,让开发者能够轻松地使用各种字体图标,而无需关心字体文件和CSS样式的具体细节。通过字体图标组件,开发者可以快速添加、调整和管理各种图标,从而增强用户界面的视觉效果。
Props参数
名称 | 类型 | 是否必传 | 默认值 | 描述 |
---|---|---|---|---|
value | MMIconFontName | 否 | - | 图标值 |
color | string | 否 | - | 图标颜色 |
size | number | 否 | - | 图标大小 |
className | string | 否 | - | 同 class ,在 React/Nerv 里一般使用 className 作为 class 的代称 |
style | CSSProperties | 否 | - | 组件的内联样式, 可以动态设置的内联样式 |
示例
tsx
import { View } from '@tarojs/components'
import MMIconFont, { MMIconFontName } from '~/components/icon-font/index'
import MMPageContainer from '../_components/page-container'
import styles from './index.module.less'
import Taro from '@tarojs/taro'
export default () => {
function handleClick(value) {
Taro.setClipboardData({
data: `MMIconFontName.${MMIconFontName[value]}`,
success() {
Taro.showToast({ title: '已复制', icon: 'none' })
}
})
}
return (
<MMPageContainer title="字体图标">
<View className={styles.wrapper}>
{Object.keys(MMIconFontName)
.filter((value) => !isNaN(parseInt(value, 10)))
.map((value: any) => (
<View className={styles.flex} key={value} onClick={() => handleClick(value)}>
<MMIconFont value={value} />
<View>{MMIconFontName[value]}</View>
</View>
))}
</View>
</MMPageContainer>
)
}