ets-iconfont

介绍

简单的Iconfont eTS组件

https://gitee.com/hytyj_hamstermie/ets-iconfont

配合工具generate-iconfont-ets

https://gitee.com/hytyj_hamstermie/generate-iconfont-ets

安装教程

进入项目entry文件夹下，执行

$ npm install git+https://gitee.com/hytyj_hamstermie/ets-iconfont.git
使用说明

见工具generate-iconfont-ets

https://gitee.com/hytyj_hamstermie/generate-iconfont-ets

generate-iconfont-ets

介绍

@tiantianjiang/ets-iconfont 配套工具，使用前请先安装@tiantianjiang/ets-iconfont

安装教程

$ git clone https://gitee.com/hytyj_hamstermie/generate-iconfont-ets.git

使用说明

下载 generate-iconfont-ets 到本地

3.png

去iconfont下载图标项目

https://www.iconfont.cn/

1.png

只需要iconfont.js文件

2.png

复制到generate-iconfont-ets根目录，在根目录下执行

$ npm run build

可以看到myiconfont.ets已更新，复制myiconfont.ets到需要使用的项目中。

API

  • fontName: string 字体图标名称，同className一致，必传

  • style

    • fontSize: number 字体图标大小，单位px，默认为200
    • fontWeight: number 字体图标加粗，单位px，默认为0
    • fontColor: 字体图标颜色，只支持单色，默认为黑色

示例

import { MyIconfont } from './myiconfont'

@Entry
@Component
struct Demo {
  build() {
    Flex({
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center,
      direction: FlexDirection.Column
    }) {
      MyIconfont({
        fontName: 'icon-qianhouduan',
        style: {
          fontSize: vp2px(100),
          fontWeight: 10,
          fontColor: Color.Red
        }
      })
      Text('icon-qianhouduan').fontSize(30).margin({ top: 10 })
    }
    .width('100%')
    .height('100%')
  }
}

image.png