Ant Design 是怎么管 Icon 的？

2019-07-19 12:07:21 浏览数 (1)

Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系；

注：antd 设计价值观 https://ant.design/docs/spec/values-cn

图1：Ant Design 的 Icon（线框风格）

图2：Ant Design 的 Icon（填充风格）

图3：Ant Design 的 Icon（双色风格）

—— https://ant.design/components/icon-cn/

1. antd 的图标什么格式？

Ant Design 的 Icon 使用的是 SVG 格式图标；

—— 《antd 官网》

注：为什么选 SVG 而不是 IconFont

  • https://blog.github.com/2016-02-22-delivering-octicons-with-svg/
  • https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/
  • https://css-tricks.com/icon-fonts-vs-svg/

2. antd 的图标基本规则？

2.1. 图标主题风格（theme）

  • fill（填充型）
  • outline（线框型）
  • twotone（双色型）

2.2. 设计尺寸

  • 画板尺寸： 1024px * 1024px；
  • 出血位：64px；

3. 如何使用 antd 的 Icon？

3.1. 常规用法

直接通过 <Icon/> 的 type 和 theme 指定图标。

3.2. 引用 iconfont.cn 中的定制图标

3.3. 自行引入 SVG 图标

<Icon/> 标签也可以通过 component 引入自定义的 SVG React 组件；

注：svgr 可以完成 svg 文件到 react 组件的转换；

4. SVG 基本原理？

SVG （Scalable Vector Graphics）是一种基于 XML 语法的矢量图像格式（怎么放大都不失真的那种...）。

图：用 SVG 画了个小矩形

SVG 绘图、坐标系、动画相关知识

给大家安利下面这个教程

慕课 SVG 教程网址：

走进SVG：https://www.imooc.com/learn/143

5. antd 的 Icon 组件构成？

Ant Design 的 Icon 由 4 部分构成：

  • ant-design-icons/icons：存储所有原始 svg 图标文件，并负责转换、导出 svg 的定义描述；
  • ant-design-icons/icons-react：可以将 svg 定义描述转换为 React 组件；
  • ant-design/Icon：负责整合 icons 和 icons-react，将 icons 导出的所有 svg 定义描述导入 icons-react，并对外提供 Icon 接口；
  • ant-design-palettes：调色盘，能根据主色生成与之匹配的辅色（用于 twotone 型图标）；

下面重点分析

icons、icons-react、icon

这3个项目的源码

6. ant-design-icons/icons

6.1. 用途、目录结构

  1. 储存着所有 svg 图标；
  2. 优化、压缩 svg 图标（使用 SVGO）；
  3. 转换 svg 图标为 IconDefinition；
  4. 导出所有 svg 图标的 IconDefition；

6.2. 关键数据结构

6.3. 核心逻辑分析

7. ant-design-icons/icons-react

7.1. 用途、目录结构

icons-react 用于将 IconDefinition 渲染为 SVG；

7.2. 核心逻辑分析

8. ant-design/icon

8.1. 用途、目录结构

  1. 对外提供 Icon 接口；
  2. 整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过 type 和 theme 直接使用预定义的图标；
  3. 提供 createFromIconfontCN 接口，加载定义于 IconfontCN 中使用 svg symbol 技术打包的 svg 图标；
  4. 提供 component 接口，以便引入自定义的 React 组件（例如通过 svgr 转换 svg 得到的 React 组件）；

8.2. 整合 icons、icons-react 原理分析

8.3. createFromIconfontCN 原理分析

参考：

svg 视频教程： https://www.imooc.com/learn/143 svgo、svgr 项目地址： https://github.com/svg/svgo https://github.com/smooth-code/svgr ant-design、ant-design-icons 项目地址： https://github.com/ant-design/ant-design-icons https://github.com/ant-design/ant-design/ svg 相关文章： https://css-tricks.com/svg-symbol-good-choice-icons/ https://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/

https 网络安全 svg apache github

0 人点赞