Skip to content

icon-font 图标 ​

字体图标组件是一种用于在网页或应用程序中显示字体图标的UI组件。这样的组件通常提供了简单的接口,让开发者能够轻松地使用各种字体图标,而无需关心字体文件和CSS样式的具体细节。通过字体图标组件,开发者可以快速添加、调整和管理各种图标,从而增强用户界面的视觉效果。

Props参数 ​

名称类型是否必传默认值描述
valueMMIconFontName否-图标值
colorstring否-图标颜色
sizenumber否-图标大小
classNamestring否-同 class,在 React/Nerv 里一般使用 className 作为 class 的代称
styleCSSProperties否-组件的内联样式, 可以动态设置的内联样式

示例 ​

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>
  )
}