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