Nicolas Gallagher
在 Twitter,我使用这里描述的方法将公司的 SVG 图标库发布为几种不同的格式:优化的 SVG、普通 JavaScript 模块、React DOM 组件和 React Native 组件。
没有一种“唯一正确的方式”©来创建 SVG 图标系统。SVG 图标系统唯一的共同点是,它们以某种方式使用 SVG 来显示图标。我必须找点时间写一篇关于所有可能性的文章。
不同的系统往往共享一些构建过程,将包含 SVG 文件的文件夹转换为更易于程序化理解的格式。例如,gulp-svg-sprite 会获取您的 SVG 文件夹并创建一个 SVG 精灵(<symbol>
的块),用于这种类型的 SVG 图标系统。 Grunticon 将您的 SVG 文件夹处理成 CSS 文件,并且能够将它们增强为内联 SVG。Gallagher 的脚本会从中创建 React 组件,正如他所说,这对于交付到不同的目标以及性能优化(例如代码拆分)非常有用。
这体现了 SVG 的多功能性。它只是标记,因此易于操作。