Please add license to this package and all the sub packages.

来源于 ant-design/ant-design#18592

RT

Some components reference icons by unicode character in CSS directly, example. We should replace these unicode characters by Icon component.

Now, I only use a few icons in @ant-design/icons.

I will use more in the future, but I definitely can't use all the icons.

When i import @ant-design/icons like this:

import { AntDesignOutline, DashboardOutline, TwitterOutline } from '@ant-design/icons';
import AntdIcon from '@ant-design/icons-react';

AntdIcon.add(AntDesignOutline, DashboardOutline);

Webpack bundle all icons, including what I didn't use.

I am not sure if I can use it with babel-plugin-import.

It is awesome, if we can dynamic import icons just like antd

大的要受不了。。想想办法

@ant-design/[email protected] requires a peer of @ant-design/icons@~1.1.0 but none is installed. You must install peer dependencies yourself.

warn The following packages use deprecated "rnpm" config that will stop working from next release:

• @ant-design/icons-react-native: https://npmjs.com/package/@ant-design/icons-react-native
• react-native-maps: https://npmjs.com/package/react-native-maps
  Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.

https://codesandbox.io/s/blazing-snow-hksc0

The current stable 7.x release of NgZorro uses TypeScript "~3.2.2" while the angular-icons uses "~3.1.3".

Could these be synced up so that npm won't warn about mismatching peer dependencies?

这个写法是有问题的吧？这样不是必定 js 么？ useJsonpLoading 是个方法

Originally posted by @olivewind in https://github.com/ant-design/ant-design-icons/diffs

After doing a clean clone and bootstrap I run into a few typescript errors:

> @ant-design/[email protected] generate /Users/mark/git/ant-design-icons/packages/icons
> cross-env TS_NODE_PROJECT=build/tsconfig.json node --require ts-node/register build/index.ts


/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:261
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
build/generateIcons.ts(61,49): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'ThemeType'.
  Type 'string[]' is not assignable to type '"twotone"'.
build/generateIcons.ts(80,31): error TS2344: Type 'BuildTimeIconMetaData' does not satisfy the constraint 'ObservableInput<any>'.
  Property '[Symbol.iterator]' is missing in type 'BuildTimeIconMetaData' but required in type 'Iterable<any>'.
build/generateIcons.ts(81,20): error TS7031: Binding element 'kebabCaseName' implicitly has an 'any' type.
build/generateIcons.ts(81,35): error TS7031: Binding element 'identifier' implicitly has an 'any' type.
build/generateIcons.ts(113,49): error TS2344: Type 'BuildTimeIconMetaData' does not satisfy the constraint 'ObservableInput<any>'.
  Type 'BuildTimeIconMetaData' is not assignable to type 'Iterable<any>'.
build/generateIcons.ts(114,8): error TS7006: Parameter 'metaData$' implicitly has an 'any' type.
build/generateIcons.ts(205,49): error TS2344: Type 'BuildTimeIconMetaData' does not satisfy the constraint 'ObservableInput<any>'.
  Type 'BuildTimeIconMetaData' is not assignable to type 'Iterable<any>'.
build/generateIcons.ts(206,8): error TS7006: Parameter 'metaData$' implicitly has an 'any' type.
build/generateIcons.ts(230,41): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'ThemeType'.
  Type 'string[]' is not assignable to type '"twotone"'.

    at createTSError (/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:261:12)
    at getOutput (/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:367:40)
    at Object.compile (/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:558:11)
    at Module.m._compile (/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:439:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/mark/git/ant-design-icons/packages/icons/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ant-design/[email protected] generate: `cross-env TS_NODE_PROJECT=build/tsconfig.json node --require ts-node/register build/index.ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ant-design/[email protected] generate script.

Tested with both node 8 and node 11 with the latest versions of yarn/npm/lerna.

check-close-circle 或应为 check-circle。

链接：https://github.com/ant-design/ant-design-icons/blob/dev/src/svg/check-close-circle.svg

另外，不考虑将 svg 图标发布上 npm 吗？

该图标库是从 [email protected] 开始正式使用的图标库，本文将讲述该图标库如何处理从设计师拿到的图标和具体处理流程。

@ant-design/icons(-svg) v4 贡献指南

@ant-design/icons(-svg) v4 Contribution Guide

以下内容为 antd v3 版本适用

项目命令

整个项目通过 lerna 进行管理，预计包管理目录结构如下如下

packages
├── icons          # 核心依赖
├── icons-react
├── icons-angular
└── icons-vue

所有命令运行之前，请确保运行 npm run bootstrap 引导各个包安装依赖和符号链接。

国内用户可以运行使用淘宝镜像的 npm run bootstrap:china

npm run icons:generate

本项目中最重要的生成命令，运行后将读取 packages/icons/svg 目录下的所有图标文件，并通过 packages/icons/build/templates 中的模板文件，将 svg 转化成一个 json 格式的抽象树，生成 ts 文件并且存储在 packages/icons/src 目录中。

npm run icons:build

构建命令，使用 tsc 将 packages/icons/src 目录下的文件编译到 packages/icons/lib 目录下，使用的是 commonjs 模块规范。同时也将 packages/icons/src/index.ts 文件使用 babel 编译到 packages/icons/lib/index.es.js ， 使用的是 ECMAScript 模块规范，用于未来可以使用 tree shaking 打包特性。

项目结构

packages/icons
├── build
│   ├── constants.ts         # 包括替换符、重新命名映射表、旧图标标记
│   ├── env.ts               # 生成时各个参数配置
│   ├── generateIcons.ts     # 最主要的生成过程函数 build(env)
│   ├── index.ts
│   ├── scripts
│   │   └── clean.ts
│   ├── templates            # 转换时使用模板存放
│   ├── typings
│   │   ├── index.ts
│   │   └── types.ts
│   └── utils
│       ├── index.ts
│       └── normalizeNames
│           ├── helpers.ts
│           └── index.ts
├── docs
├── lib                      # 构建目标文件夹
├── packages
│   └── icons-react
├── site
├── src                      # 构建源文件夹，抽象树生成目标文件夹
├── svg                      # 存放设计师的所有图标，数据源，有三种主题风格分类
│   ├── fill
│   ├── outline
│   └── twotone
└── test                     # 单元测试

基本用法

打包发布

1. 确认从设计师拿到的图标命名是否正确。（单词顺序、单词拼写）
2. 运行命令 npm run icons:generate, 生成 packages/icons/src/**/*.ts 文件
3. 生成的 packages/icons/src 目录结构如下

packages/icons/src
├── dist.ts      # 经过压缩后的全量图标文件
├── index.ts     # 图标库入口
├── types.ts     # 类型定义
├── manifest.ts  # 生成的图标名字集合
├── fill
├── twotone
└── outline      # 三种主题，存放着图标的抽象树

4. 检查名字准确无误、抽象树符合预期后，运行命令 npm run icons:build 进行编译
5. 检查编译后的文件目录 packages/icons/lib
6. 确保代码风格检查和测试通过：npm run lint, npm run icons:test
7. 使用 lerna 打包发布 lerna publish

添加新图标

1. 确认从设计师拿到的三种图标风格名字是否一致且正确
2. 将图标根据风格分别存放进 packages/icons/svg 目录下的 fill、outline 和 twotone 目录下
3. 之后的流程同上文的打包发布流程一致

进阶指南

工作流

图标的处理可以抽象成管道的流动，所以使用了 rxjs 来优雅地描述处理的过程。

命令 npm run icons:generate 的本质就是运行 packages/icons/build/generateIcon.ts 中的 build(env) 函数。

初始化环境

• SVGO 处理器配置

单色图标的 SVGO 处理器会额外清除路径元素上的 fill 属性，因为单色图标路径上的 fill 是没有必要的

• 清理原来的旧的生成文件

本质是清理 env.paths 路径中以 _OUTPUT 结尾的标识符所代表的文件或者表达式

• 规范化图标命名

这是单向一次性的过程，会根据 packages/icons/build/constants.ts 中的 renameMapper 重新命名 svg 目录下的图标文件。

最好重命名都写在该映射表下，重命名会同时影响三种主题风格下的同名图标

流

• svgMetaDataWithTheme$ SVG 元数据流

这是一个高阶流，根据三种主题风格 fill、outline、twotone 分别发射出分支流，每个分支流上的数据的接口类型如下：

export interface BuildTimeIconMetaData {
  identifier: string; // 标识符，以大写风格名结尾，例如：AccountBookFill、AlertFill
  icon: IconDefinition; // 图标定义类型
}

上述的图标定义类型接口如下：

export interface IconDefinition {
  name: string; // kebab-case-style
  theme: ThemeType;
  icon:
    | ((primaryColor: string, secondaryColor: string) => AbstractNode) // 接受主色和副色生成抽象树的函数
    | AbstractNode; // 定义SVG结构的抽象树
}

• BuildTimeIconMetaData$ 构建时图标原数据流

该数据流将高阶流 svgMetaDataWithTheme$ 打平，并且进行了如下处理：

1. 对于非旧图标（指使用设计师给的新图标，通常大小比较小），修改其 viewBox 为 64 64 896 896。

为什么是 64 64 896 896 ? 参见相关issue.

Can't solve this issue. Whenever I try to run my React project I get the following error: _iconsReact.default.add is undefined

This error comes from the following file path (line 56):
/node_modules/lib/icon/index.js

The following code in that file seems to have some problems, because _iconsReact.default.add stays undefined.

// Initial setting
_iconsReact["default"].add.apply(_iconsReact["default"], _toConsumableArray(Object.keys(allIcons).map(function (key) {
  return allIcons[key];
})));

What can I do to resolve this issue?

Versions:

• webpack: 4.23.1
• babel-core: 7.0.0-bridge.0
• react: 16.3.1
• antd 3.13.6

after I upgrade to webpack 4，I have encounter one problem：

actually I did not use this package。antd use it by default!

TypeError: _iconsReact2.default.add is undefined

the reason is _iconsReact2 is recognized as a commonjs version。

// Initial setting
_iconsReact2['default'].add.apply(_iconsReact2['default'], (0, _toConsumableArray3['default'])(Object.keys(allIcons).map(function (key) {
    return allIcons[key];
})));

if I change to _iconsReact2['default']['default']，it will work，so，what is solution here?

Hi there.
In my project I use antd for components and FontAwesome for icons. I never explicitly use icons from Ant Design (Not a single <Icon/> component in my project).
Despite that, I can see that in my bundle.js, @ant-design/icons is about 0.5MB (!) in size.

In order to optimize antd imports, I use babel-plugin-import as such:

["import", {
  "libraryName": "antd",
  "libraryDirectory": "es",
  "style": true
}]

But it doesn't seem to help with reducing the unused icons size taken in my bundle.

such as https://github.com/NG-ZORRO/ng-zorro-antd

cc @vthinkxie

Add a way to customize the title on the resulted SVG

https://ant.design/components/icon/

chrome 70

Import https://www.npmjs.com/package/dynamic-icon

• antd-icons => @ant-design/icons
• react-antd-icons => @ant-design/icons/react

Ask @yesmeck for npm scope permission.

Result in generating failure.

Request an icon of Kubernetes at https://github.com/kubernetes/kubernetes.

Thank you, guys. 🤗

Hello,
Yesterday, I've upgraded my package.json with @ant-design/[email protected], today I'm unable to deploy my code because you removed the 2.0.3 release and pushed the 2.0.4 one.
Is there a specific reason to remove this release from npmjs? Removing a release (instead of marking it as deprecated) can lead to many problems and I do not understand this choice.

We are overall super happy with Ant-Design and are currently using the @Alpha tag on v4. One thing we noticed though was that icons have been changed from <Icon type="User" /> to <User />. This currently gives a whole bunch of clashes in declarations, e.g. if you have your own component. This risk only increases as more icons are added.

Currently we are aliasing everything so;

import { User as UserIcon } from "..."

Additionally the code becomes less readable because you cannot directly infer if is an icon component imported from antd, or if it's a proprietary component. This is for example the case between packages for <Link /> which is also exported by React Router This is okay for sparsely used components, but seeing icons are used throughout an application this becomes a challenge.

This is a worse developer experience compared to before. While I see the benefits from exporting each icon as their own component, have you considered pre or post-fixing them?

要搞一篇文档，方便大家都能快速上手操作。

I have many svg icons and I want use them with @ant-design/icons like that:

import { AntdIcon } from '@ant-design/icons'
import MyIcon from '~/svg/my-icon.svg'

<AntdIcon icon={MyIcon} />

SVG图标与文字在一起的时候，SVG图标不会与行的基线对齐。
必须设置如下样式才能对齐。

svg {
   vertical-align: -.125em;
}

See https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4

考虑这一特性。
是否需要适配器如@ant-design/icons-react中帮用户设置好此样式？
还是需要用户自行设置？如antd里的.anticon类中设置了vertical-align: -.125em;。

I use antd as external in webpack. When antd version to v3.9.x, the main bundle size be added 700+kb.

Through webpack-bundle-analyzer, I found that the bundle grows caused by @ant-design/icons.

Want use the https://unpkg.com/@ant-design/[email protected] CDN.

Can are you add send icon, something like Telegram app logo. I think is very frequent use case.

I've linked the fonts by

> react-native link @ant-design/icons-react-native
info Assets have been successfully linked to your project

But I got the error while using:

import { ScrollView, Text, TouchableWithoutFeedback, View } from 'react-native';
import { Button, Flex, WhiteSpace, WingBlank } from '@ant-design/react-native';
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
import React, { Component } from 'react';

export default class HeaderBar extends Component {
    constructor(props){
        super(props);
    }

    render() {
        // while(this.state.route=='') continue;
        return (
            <View style={{flex: 1}}>
                <Flex>
                    <Flex.Item>
                        <IconOutline name="left"></IconOutline>
                    </Flex.Item>
                </Flex>
            </View>
          );
    }
}

Any idea?

Is there a way to add a custom svg and call it like

<AntdIcon type='custom-icon-id' />;

I am curious about it.

Old version ( <= v3.6.3 ):
https://2x.ant.design/components/icon

New version ( v3.9.1 ):
https://ant.design/components/icon
https://github.com/ant-design/ant-design-icons/blob/master/svg/outline/login.svg

https://codesandbox.io/s/antd-reproduction-template-sn4qw

Warning: [@ant-design/icons] icon should be icon definiton, but got [object Object]

Hello!
I am trying to build some components libs on top of ant-design for internal usages.

Included the the ant-design as dependencies and use rollup to bundle it up.

After that I start a create-react-app application and test it out for my components libs.

And getting this errors:

It seem the angular adaptor will passing the default theme when then theme is undefined

but seem the vue and react did not share the same behaviour

Maybe we should unify the this behaviour across different platform

since the angular version is computed.
We should have to use lerna to manage the three npm packages:

• @ant-design/icons
• @ant-design/icons-react
• @ant-design/icons-angular

The work is in progress.

• ant-design-icons 仓库新建 next-v4 分支，之后社区的next-v4分支将会提pr，该pr包含对原icons-svg的命名和新的icons-svg增加。

React/React-Native/Vue/Angular各自社区实现对应支持tree shaking的图标组件或指令，分支在仓库ant-design-icons下的next-v4分支

• @ant-design/icons (React) @vagusX #112
• @ant-design/icons-vue (Vue) @tangjinzhou #153
• @ant-design/icons-angular (Angular) @wendzhue
• @ant-design/icons-react-native (React-Native) @BANG88

各自社区支持tree shaking的图标组件或指令实现后，即可去掉WIP:前缀。
同时原来的icons-svg-legacy可以考虑删除。
之后将next-v4分支合并到master分支上。

Ref: ant-design/ant-design#19896

In my see, insert styles in Icon component called, but priority we not control, so we can add styles top of head element

1. Versions:

• "@ant-design/icons": "^2.1.1",
• "@ant-design/icons-vue": "^2.0.0",

2. Usage:

import Vue from 'vue'
import {
  DashboardOutline,
  CheckCircleFill,
  CheckCircleOutline,
  CloseCircleFill,
  CloseCircleOutline,
  InfoCircleFill
} from '@ant-design/icons'
import AntdIcon from '@ant-design/icons-vue'

console.log('AntdIcon: ', CheckCircleOutline)
AntdIcon.add(
  DashboardOutline,
  CheckCircleFill,
  CheckCircleOutline,
  CloseCircleFill,
  CloseCircleOutline,
  InfoCircleFill
)
Vue.use(AntdIcon)

 render () {
   return (<antd-icon class="success" type="check-circle"></antd-icon>)
}

3. Actual effect

Nothing is rendered

4. Expectation

{ book, file , file-***}
looks weird if aligned with other square-ish icons as buttons in a menu.
is there any way to define their height and width separately?

If you need any new icons, please reply in this issue.

Hi, i tried to use loading icon, but cannot make it animated
expected result

<antd-icon :type="icon_type"
  :class="current_state"
  sync
  v-on:click="get_changes" />

But it is not work, and pass 'sync' to class and type does not help

Now icons-angular provide dynamic loading which enable users to load icon resource through XMLRequest (in order to reduce bundling size). However, most CDN don't support cross-domain XMLRequest.

A jsonp like tech is required. When translating icon resources, instead of omitting svg files, we omit js files like:

(function() {
  window.__ant_load_icon(
    /** icon definition goes here */
  );
})();

So, when icons-angular tries to load an icon dynamically, instead of firing a XMLRequest, it inserts a script into DOM like:

<script src="https://yourcdngoeshere.com/icons/outline/smile.js"></script>

highly appreciated for making this icons!

Right now I am using Caret icons but looks like fill and outline svgs are same

https://github.com/ant-design/ant-design-icons/blob/master/packages/icons/svg/fill/caret-up.svg
https://github.com/ant-design/ant-design-icons/blob/master/packages/icons/svg/outline/caret-up.svg

It would be good to have outline caret icons only have outline body, like https://thenounproject.com/term/down-caret/196759/

Cheers!

I think jest is more state of the art than mocha right now.

http://icons.ant.design

Could be English only