ant-design-icons 源码解析

• ant-design-icons组件说明文档： https://ant.design/components/icon-cn
• ant-design-icons开源地址： https://github.com/ant-design/ant-design-icons
• 代码逻辑：
  • svg源码位置：packages/icons-svg/svg
  • 生成逻辑：
    • yarn generate: 基于 packages/icons-svg/gulpfile.ts 打包文件，将 packages/icons-svg/svg svg 文件 gulp 打包生成组件，放到src文件中，同时在src文件中根据生成的组件列表生成一个index文件，同时打包 inline-svg、inline-namespaced-svg 内联文件；生成 inline-svg、inline-namespaced-svg 内联文件是为了提供更多的灵活性和兼容性，以满足不同的使用场景和需求。
    • yarn-build: 基于tsconfig.build.json配置文件和第一步生成的 src/**/** 文件夹，生成 lib 和 es 文件夹，供外部调用
  • 外部使用，外部直接调用 lib的index文件；
  • 核心插件：gulp、SVGO、ehs、fs、path；其中，SVGO 是一个用于优化 SVG 文件的工具，ejs 是一个用于生成模板文件的工具
• 优点：
  • svg生成组件的设计思路主要是为了提供一种模块化和可重用的方式来使用 SVG 图标；通过将 SVG 图标转换为 React 组件，开发者可以直接在他们的 React 项目中使用这些图标，就像使用任何其他 React 组件一样。
  • 这种方法的好处包括：
    1. 易于使用：开发者可以直接在他们的 JSX 代码中使用这些图标组件，而无需处理 SVG 的导入和渲染。
    2. 模块化：每个图标都是一个独立的模块，可以单独导入，这有助于减少最终打包的大小，因为你只需要打包你实际使用的图标。
    3. 可定制：由于这些图标是 React 组件，所以开发者可以使用 React 的 props 来定制这些图标的属性，如颜色、大小等。
    4. 一致性：所有的图标都有相同的 API（接口），这有助于保持代码的一致性。
    5. 可维护性：如果需要更新图标，只需要更新对应的 React 组件即可，无需在整个项目中搜索和替换 SVG 文件。

#front-component/ant-disign