https://github.com/singcl/iconfont-cn

在Vue2.x中使用自定义的iconfont Icon
https://github.com/singcl/iconfont-cn

icon iconfont vuejs2

Last synced: 2 months ago
JSON representation

在Vue2.x中使用自定义的iconfont Icon

• Host: GitHub
• URL: https://github.com/singcl/iconfont-cn
• Owner: singcl
• Created: 2021-11-16T06:52:22.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-25T03:29:13.000Z (over 4 years ago)
• Last Synced: 2025-10-25T15:29:40.474Z (8 months ago)
• Topics: icon, iconfont, vuejs2
• Language: JavaScript
• Homepage:
• Size: 64.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Build Status](https://app.travis-ci.com/singcl/iconfont-cn.svg?branch=master)](https://app.travis-ci.com/singcl/iconfont-cn)

[![](https://img.shields.io/bundlephobia/min/@singcl/iconfont-cn)](https://www.npmjs.com/package/@singcl/iconfont-cn)

[![](https://img.shields.io/npm/v/@singcl/iconfont-cn)](https://www.npmjs.com/package/@singcl/iconfont-cn)

![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/singcl/iconfont-cn/dev/rollup)

[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/singcl/iconfont-cn)

## @singcl/iconfont-cn

在`vue2.x`项目中可以使用自定义的 iconfont 图标库。

### Motivation

业务需要自定义一批 ICON 在多个系统间共用，多个系统有的是 React 开发的，有的时候 Vue 开发的。React 可以直接使用@antd/icons; 而 Vue2.x 的项目大多没有多没有引入 antd UI，基于此，我从[ant-design-vue](https://github.com/vueComponent/ant-design-vue/)单独提取出`createFromIconfontCN`这个功能组件。

### 使用简介

#### 1. 安装

```

npm i @singcl/iconfont-cn -S

```

#### 2. API

| 参数      | 说明                                                                                | 类型                                      | 默认值       |

| --------- | ----------------------------------------------------------------------------------- | ----------------------------------------- | ------------ |

| type      | 图标类型。遵循图标的命名规范                                                        | `string`                                  | -            |

| style     | 设置图标的样式，例如 `fontSize` 和 `color`                                          | `CSSProperties`                           | -            |

| theme     | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 `'filled', 'outlined'` | `'filled', 'outlined'`                    | `'outlined'` |

| spin      | 是否有旋转动画                                                                      | `boolean`                                 | `false`      |

| rotate    | 图标旋转角度（1.4.0 后新增，IE9 无效）                                              | `number`                                  | -            |

| component | 控制如何渲染图标，通常是一个渲染根标签为 `svg` 的 Vue 组件，会使 type 属性失效      | `ComponentType` | -            |

#### 3. 使用

```js

import Icon from "@singcl/iconfont-cn";

const MyIcon = Icon.createFromIconfontCN({

  scriptUrl: ["//at.alicdn.com/t/font_1643719_bh60dvbkfv.js"],

});

Vue.component("my-icon", MyIcon);

```

```jsx

```

当然 UMD 模式也是支持的，`examples`中的示例就是浏览器直接使用。

![](https://img.shields.io/github/package-json/v/singcl/iconfont-cn)

![npm](https://img.shields.io/npm/dw/@singcl/iconfont-cn)

[![install size](https://packagephobia.com/badge?p=@singcl/iconfont-cn)](https://packagephobia.com/result?p=@singcl/iconfont-cn)