https://github.com/jtsang4/umi-plugin-antd-type-icon

🎁 Add <Icon type="iconType" /> component for antd@4 and only import icons you need.
https://github.com/jtsang4/umi-plugin-antd-type-icon

Last synced: 8 days ago
JSON representation

🎁 Add <Icon type="iconType" /> component for antd@4 and only import icons you need.

• Host: GitHub
• URL: https://github.com/jtsang4/umi-plugin-antd-type-icon
• Owner: jtsang4
• Created: 2020-07-21T08:30:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-22T03:31:49.000Z (over 4 years ago)
• Last Synced: 2024-10-28T13:21:33.265Z (21 days ago)
• Language: TypeScript
• Homepage:
• Size: 248 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# umi-plugin-antd-type-icon

[![NPM version](https://img.shields.io/npm/v/umi-plugin-antd-type-icon.svg?style=flat)](https://npmjs.org/package/umi-plugin-antd-type-icon)

[![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-antd-type-icon.svg?style=flat)](https://npmjs.org/package/umi-plugin-antd-type-icon)

Add `` component for antd@4 and only import icons you need.

> - When to use this plugin?

>

> If you want to render antd icon dynamically, this plugin could render icons in a scope which you specified instead of importing all antd icons. 

## Install

```bash

# or yarn

$ npm install umi-plugin-antd-type-icon --save

```

## Usage

### 1. Configure in `.umirc.js`,

```js

export default {

  plugins: [

    'umi-plugin-antd-type-icon',

  ],

  icons: [

    'UpOutlined',

    {

      QuestionOutlined: 'Question',

      PlusOutlined: ['PlusOutlined', 'Plus'],

    },

  ],

}

```

### 2. Use in component

```jsx

import React from 'react';

import { Icon } from 'umi';

const FooComponent = props => {

  const { type } = props; // 'type' could be: 'UpOutlined', 'Question', 'PlusOutlined', 'Plus'

  return (

    


      

    

  );

};

```


## Options

### `icons`

An array to specify which icons you need. Support 3 forms:

1. Origin icon type in antd

Like `'UpOutlined'` which is origin from antd Icons.

2. Map origin type to another type

Like `{ QuestionOutlined: 'Question' }`, 'QuestionOutlined' is origin from antd, then you can use it as 'Question' type.

3. Map origin type to a group of types

Like `{ PlusOutlined: ['PlusOutlined', 'Plus'] }`, 'PlusOutlined' is origin from antd, then you can use it as 'PlusOutlined' or 'Plus' type.

## Extra

Icon type mapping string should not duplicate.

## LICENSE

MIT