⭐ The abstract trees of the Ant Design SVG icons.
- Vanilla: @ant-design/icons-svg
- React: @ant-design/icons
- React Native: @ant-design/icons-react-native
- Angular: @ant-design/icons-angular
- Vue: @ant-design/icons-vue
⭐ Ant Design SVG Icons
Home Page: https://ant.design/components/icon/
License: MIT License
⭐ The abstract trees of the Ant Design SVG icons.
Some components reference icons by unicode character in CSS directly, example. We should replace these unicode characters by Icon
component.
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} />
RT
Add a way to customize the title on the resulted SVG
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.
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>
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
warn The following packages use deprecated "rnpm" config that will stop working from next release:
大的要受不了。。想想办法
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?
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;
。
https://codesandbox.io/s/antd-reproduction-template-sn4qw
Warning: [@ant-design/icons] icon should be icon definiton, but got [object Object]
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
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?
I think jest is more state of the art than mocha right now.
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.
Request an icon of Kubernetes at https://github.com/kubernetes/kubernetes.
Thank you, guys. 🤗
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
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>)
}
Nothing is rendered
Please add license to this package and all the sub packages.
check-close-circle
或应为 check-circle
。
链接:https://github.com/ant-design/ant-design-icons/blob/dev/src/svg/check-close-circle.svg
另外,不考虑将 svg 图标发布上 npm 吗?
React/React-Native/Vue/Angular各自社区实现对应支持tree shaking
的图标组件或指令,分支在仓库ant-design-icons下的next-v4
分支
各自社区支持tree shaking
的图标组件或指令实现后,即可去掉WIP:
前缀。
同时原来的icons-svg-legacy
可以考虑删除。
之后将next-v4
分支合并到master
分支上。
If you need any new icons, please reply in this issue.
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.
Result in generating failure.
该图标库是从 [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 # 单元测试
npm run icons:generate
, 生成 packages/icons/src/**/*.ts
文件packages/icons/src
目录结构如下packages/icons/src
├── dist.ts # 经过压缩后的全量图标文件
├── index.ts # 图标库入口
├── types.ts # 类型定义
├── manifest.ts # 生成的图标名字集合
├── fill
├── twotone
└── outline # 三种主题,存放着图标的抽象树
npm run icons:build
进行编译packages/icons/lib
npm run lint
, npm run icons:test
lerna
打包发布 lerna publish
packages/icons/svg
目录下的 fill
、outline
和 twotone
目录下图标的处理可以抽象成管道的流动,所以使用了 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$
打平,并且进行了如下处理:
viewBox
为 64 64 896 896
。为什么是
64 64 896 896
? 参见相关issue.
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.
这个写法是有问题的吧?这样不是必定 js 么? useJsonpLoading 是个方法
Originally posted by @olivewind in https://github.com/ant-design/ant-design-icons/diffs
{ 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?
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?
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
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!
Could be English only
Is there a way to add a custom svg and call it like
<AntdIcon type='custom-icon-id' />;
要搞一篇文档,方便大家都能快速上手操作。
@ant-design/[email protected] requires a peer of @ant-design/icons@~1.1.0 but none is installed. You must install peer dependencies yourself.
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
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'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:
antd-icons
=> @ant-design/icons
react-antd-icons
=> @ant-design/icons/react
Ask @yesmeck for npm scope permission.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.