# mqq-reader-icons

> Icon automation workflow with Figma

Latest version **0.2.12** (published 2021-04-14) · 0 weekly downloads

## Install

```sh
npm install mqq-reader-icons
pnpm add mqq-reader-icons
yarn add mqq-reader-icons
bun add mqq-reader-icons
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.12 |
| Published | 2021-04-14 |
| First published | 2020-11-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 689.7 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Gwokhov |
| Maintainers | gwokhov |
| Keywords | css, svg, figma, icon, design |

## Links

- npm: https://www.npmjs.com/package/mqq-reader-icons
- npm.io page: https://npm.io/package/mqq-reader-icons

## Dependencies (8)

- [got](https://npm.io/package/got.md) ^11.8.0
- [svgo](https://npm.io/package/svgo.md) ^1.3.2
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.5
- [p-queue](https://npm.io/package/p-queue.md) 2.4.2
- [figma-js](https://npm.io/package/figma-js.md) ^1.13.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [change-case](https://npm.io/package/change-case.md) ^4.1.2
- [image-to-base64](https://npm.io/package/image-to-base64.md) ^2.1.1

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.2.12 (latest) — 2021-04-14
- 0.2.11 — 2021-04-14
- 0.2.10 — 2021-04-06
- 0.2.9 — 2021-04-06
- 0.2.8 — 2021-04-06
- 0.2.7 — 2021-04-06
- 0.2.6 — 2021-04-02
- 0.2.5 — 2021-04-02
- 0.2.4 — 2021-04-02
- 0.2.3 — 2021-04-02
- 0.2.2 — 2021-04-02
- 0.2.0 — 2021-04-02
- 0.1.4 — 2021-03-17
- 0.1.1 — 2021-02-24
- 0.1.0 — 2021-01-11
- … 3 more at https://npm.io/package/mqq-reader-icons/versions

## README

# MQQ-READER-ICONS

[MQQ-READER-ICONS](https://yued-fe.github.io/mqq-reader-icons/)

## 使用

> 基于 CSS 变量，组件具体可根据业务需要进行封装

```html
<i
  class="mqq-icon normal"
  style="--i-image: var(--i-add); --i-size: 40px; --i-color: #545454"
></i>
```

```css
.mqq-icon {
  width: var(--i-size);
  height: var(--i-size);
}

/* tint icon */
.mqq-icon.normal {
  background-color: var(--i-color, #000);
  -webkit-mask-image: var(--i-image);
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
}

/* 多色 icon */
.mqq-icon.ext {
  background: center / var(--i-size) no-repeat var(--i-image);
}
```

## icon 是怎么生成的？

1. 通过 `fetch` 先把 figma 的 icon components 抓取下来保存为 svg 或 png 等。
2. 通过 `convert` 对 👆 抓取下来的 icon assets 进行转换（通常针对业务中对 icon 的使用方法来决定转换的格式）。
   1. 将 svg 的图片通过 SVGO 进行压缩处理，并以 Data URLs 的形式作为 CSS 变量保存在`icons.css`中。
   2. 将 png 的以 Base64 Data URLs 的形式作为 CSS 变量保存在`icons.css`中。
3. 业务方可以通过 `npm scripts` 等方法对 npm 包进行更新，同时将 `./node_modules/mqq-reader-icons/dist` 下的内容进行处理。如：
   ```sh
   DIR_PATH=./node_modules/mqq-reader-icons/dist
   cp ${DIR_PATH}/icons.css ./style/icons.css
   ```

## 生成文件

```
├── compressed
│   └── svg // 压缩后的 svg 文件
├── png // 从 figma 导出的 png 文件
└── svg // 从 figma 导出的 svg 文件
└── icons.css // icon CSS 变量
└── data.json // 所有 icon 名称的JSON
```

## figma 配置 & 发布 & 更新

1. 可参考 [webnovel-icons](https://github.com/yued-fe/webnovel-icons) 或 [leadream/figma-icon-automation](https://github.com/leadream/figma-icon-automation) README 文档
2. Github token：联系 [Gwokhov](https://github.com/Gwokhov) 获取

Base on:

1. [primer/figma-action](https://github.com/primer/figma-action)
2. [leadream/juuust-react-icon](https://github.com/leadream/juuust-react-icon)
3. [leadream/figma-icon-automation](https://github.com/leadream/figma-icon-automation)

---
_Source: https://npm.io/package/mqq-reader-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._