# uni-icon

> uniapp项目中，使用阿里图标库一样引入svg图标

Latest version **1.0.1** (published 2023-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install uni-icon
pnpm add uni-icon
yarn add uni-icon
bun add uni-icon
```

Provides the command `uni-icon`.

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-12 |
| First published | 2022-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.22.3  |
| Dependencies | 0 |
| Unpacked size | 142 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | TStoneLee |
| Maintainers | tstonelee |
| Keywords | uniapp, svg, iconfont, 阿里图标库 |

## Links

- npm: https://www.npmjs.com/package/uni-icon
- Repository: https://github.com/TStoneLee/uni-icon
- Issues: https://github.com/TStoneLee/uni-icon/issues
- npm.io page: https://npm.io/package/uni-icon

## 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

- 1.0.1 (latest) — 2023-07-12
- 1.0.0 — 2022-12-27

## README

## uni-icon
在UNIAPP项目中，引入阿里图标库，但是无法使用svg图标，```uni-icon```可以在本地进行转换，可以像阿里图标库引入图标那样，在**小程序**和**H5**引入svg图标，无需添加任何组件

**建议通过npm的方式安装使用**
## 通过引入文件使用（不建议！！！
1. 解压插件包后，找到dist目录下的文件，复制到项目根目录下的新目录下
2. 本地UNIAPP项目的根目录下创建一个unicon.config.js配置文件，符合CommonJS格式
   ```JS
   module.exports = {
      output: 'src/static/icon/iconfont.css',
      singleColorSvg: [],
      url: '//at.alicdn.com/t/c/font_2719016_pki5wig395f.js'
   }
   ```
    *字段解释：* <br />
    output：转换生成后的css文件，输出的路径，写法要符合Unix的规范；**必填** <br />
    singleColorSvg：单独进行转换的单色svg图标；**选填** <br />
    url：在阿里图标库的项目中，```Symbol```按钮生成的图标CDN地址；**必填** <br />
2. 在```package.json```的脚本命令中添加一个命令
  ```js
    "scripts": {
      // ......
      "icon": "node xxx（在第一步创建的目录名）/bin/uni-icon.js"
    }
  ```
3. 以上步骤完成后，运行```npm run icon```，会在output路径输入转换后的CSS文件
4. 然后在UNIAPP的项目中引入对应的类名，（和使用iconfont中的类一样）

## 通过npm方式
### Installation
----------------
    npm install uni-icon -D

### Usage
---------
1. 本地UNIAPP项目的根目录下创建一个unicon.config.js配置文件，符合CommonJS格式
   ```JS
   module.exports = {
      output: 'src/static/icon/iconfont.css',
      singleColorSvg: [],
      url: '//at.alicdn.com/t/c/font_2719016_pki5wig395f.js'
   }
   ```
    *字段解释：* <br />
    output：转换生成后的css文件，输出的路径，写法要符合Unix的规范；**必填** <br />
    singleColorSvg：单独进行转换的单色svg图标；**选填** <br />
    url：在阿里图标库的项目中，```Symbol```按钮生成的图标CDN地址；**必填** <br />
2. 在```package.json```的脚本命令中添加一个命令
  ```js
    "scripts": {
      // ......
      "icon": "uni-icon"
    }
  ```
3. 以上步骤完成后，运行```npm run icon```，会在output路径输入转换后的CSS文件
4. 然后在UNIAPP的项目中引入对应的类名，（和使用iconfont中的类一样）

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