Giter Site home page Giter Site logo

ant-design / ant-design-icons Goto Github PK

View Code? Open in Web Editor NEW
919.0 41.0 571.0 6.64 MB

⭐ Ant Design SVG Icons

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

License: MIT License

TypeScript 99.03% HTML 0.04% JavaScript 0.84% CSS 0.01% Shell 0.02% Less 0.06% EJS 0.01%
angular icons svg-icons react vue antd ant-design

ant-design-icons's Introduction

ant-design-icons's People

Contributors

1uokun avatar afc163 avatar aibayanyu20 avatar bang88 avatar cc-hearts avatar cwjterrace avatar dependabot-preview[bot] avatar heskeybaozi avatar hsuanxyz avatar jaredleechn avatar jornare avatar kisstar avatar li-jia-nan avatar madccc avatar merfais avatar nomeasmo avatar peachscript avatar redjue avatar renovate-bot avatar shaodahong avatar simplejason avatar soyoung210 avatar tangjinzhou avatar vagusx avatar wangxueliang avatar wxh16144 avatar xlcodes avatar yesmeck avatar zkwolf avatar zombiej avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ant-design-icons's Issues

Cannot build repo

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.

fontFamily "antoutline" is not a system font and has not been loaded through Font.loadAsync.

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?

Refactor [email protected] with gulp

  • 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分支上。

⭐Ant Design Icon RoadMap


logo

该图标库是从 [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

构建命令,使用 tscpackages/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      # 三种主题,存放着图标的抽象树
  1. 检查名字准确无误、抽象树符合预期后,运行命令 npm run icons:build 进行编译
  2. 检查编译后的文件目录 packages/icons/lib
  3. 确保代码风格检查和测试通过:npm run lint, npm run icons:test
  4. 使用 lerna 打包发布 lerna publish

添加新图标

  1. 确认从设计师拿到的三种图标风格名字是否一致且正确
  2. 将图标根据风格分别存放进 packages/icons/svg 目录下的 filloutlinetwotone 目录下
  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 元数据流

svg-meta-data-with-theme-flow

这是一个高阶流,根据三种主题风格 filloutlinetwotone 分别发射出分支流,每个分支流上的数据的接口类型如下:

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. 对于非旧图标(指使用设计师给的新图标,通常大小比较小),修改其 viewBox64 64 896 896

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

icons-angular release 2.0.3

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.

Huge bundle size without any explicit use, only of antd

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.

image

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.

All Caret [left, right, down, up] fill and outline svgs are same

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!

Vue how to use the filled icon?

  1. Versions:
  • "@ant-design/icons": "^2.1.1",
  • "@ant-design/icons-vue": "^2.0.0",
  1. 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>)
}
  1. Actual effect

Nothing is rendered

  1. Expectation

image

Use lerna to manage the adaptor.

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.

Expose AntdIcon 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} />

default Icon theme is missing in react and vue adaptors

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:

image

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

return withSuffix(name, theme || this._iconService.defaultTheme);

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

this.definitions.set(withSuffix(icon.name, icon.theme), icon);

Icon.definitions.set(withSuffix(icon.name, icon.theme), icon)

Maybe we should unify the this behaviour across different platform

webpack 4 problem

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?

Consider renaming exported names

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?

Support pass spin to icons

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

[Help] How to use it with `babel-plugin-import`.

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

Send icon request

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

_iconsReact.default.add is undefined

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

angular: icon dynamic loading with jsonp-like tech

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>

Update TypeScript peer dependency

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.