# generate-iconfont-ets

**Repository Path**: hytyj_hamstermie/generate-iconfont-ets

## Basic Information

- **Project Name**: generate-iconfont-ets
- **Description**: @ohos/iconfont 配套工具
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-27
- **Last Updated**: 2023-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# generate-iconfont-ets



# 介绍

`@tiantianjiang/ets-iconfont` 配套工具

请先安装`@tiantianjiang/ets-iconfont`

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

```bash
$ npm install git+https://gitee.com/hytyj_hamstermie/ets-iconfont.git
```



# 安装教程

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



# 使用说明

> iconfont  https://www.iconfont.cn/

下载 `generate-iconfont-ets` 到本地

![3](./figures/3.png)

下载图标项目

![1](./figures/1.png)

只需要`iconfont.js`文件

![2](./figures/2.png)

复制到`generate-iconfont-ets`根目录

执行

```bash
$ npm run build
```

可以看到`myiconfont.ets`已更新

复制`myiconfont.ets`到需要使用的项目中

API

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

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

示例

```typescript
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(200),
          fontWeight: 10,
          fontColor: Color.Red
        }
      })
      Text('icon-qianhouduan').fontSize(30).margin({ top: 10 }).margin({ bottom: 20 })
    }
    .width('100%')
    .height('100%')
  }
}
```