在前端开发中，使用 SVG 图像是非常常见的。随着项目越来越复杂，如何优雅地管理 SVG 文件就显得尤为重要。这时，@harryhope/svgrim 就可以派上用场了。
安装
首先，我们需要在本地安装 @harryhope/svgrim：
--- ------- -----------------
使用
在安装完成后，我们可以使用 svgrim 来管理 SVG 文件了。
初始化 svgrim 配置
我们首先需要创建一个配置文件来指定 svgrim 如何进行工作。
在项目根目录中创建一个名为 svgrim.config.js 的文件，然后像下面这样填写内容：
-------------- - - ----------- ------------------- -- --- ---------- ------------- ----------------------- -- ---------- ----------------- ---------------------------- -- ------ --
其中，iconFolder 指定了存放 SVG 图标的目录，outputFolder 指定了转换后的组件输出目录，iconSkeletonPath 指定了组件的模板文件路径。
转换 SVG 图标为组件
在配置完成后，我们就可以准备将 SVG 图标转换成可用的组件了。在命令行中执行下面的命令：
------ --------
然后 svgrim 就会扫描目录下所有的 SVG 文件，并将其转换成组件。
转换后的组件可以在 outputFolder 下找到，名称为 SVG 文件名加上 ".svelte" 后缀。例如 logo.svg 将转换成 logo.svelte。
拓展 svgrim 转换功能
因为 svgrim 的机制使得其非常灵活，所以你可以使用它拓展更多的 SVG 转换功能。
添加预处理器
在构建 SVG 组件时，我们可以使用预处理器来改变组件的样式。svgrim 支持使用 Sass 和 Less 这两种预处理器。在配置中添加以下内容即可让 svgrim 使用 Sass 预处理器：
-------------- - - -- ------------ ------------- ------- -- -- ---- ---- --
自定义组件模板
默认情况下 svgrim 会根据 iconSkeletonPath 路径下的模板文件生产模板组件。不同的模板文件可以针对不同的组件逻辑，以此实现更加灵活的组件定制。我们可以像下面这样定义一个自定义的组件模板：
---- --------------------------------- --- -------- ------ --- ----- - ------- ------ --- ---- - ------ --------- ---- ------------ ------------- ---------- - -- --- ----------- ----------------------------------- ----- ------ ------- - - ----- - ---- ------ ----- -- -- --------- -- -- ------ -- ----- ----- ------ - -- -------- -------------- -------------- ------ ------- ----- ------- ----------------- ------ ------- ------ ------- ------------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ----- ------------- --------------- ------- ------- ------- ------- ---------------------- ------ ------- ------ ------- ------------ ------------- ----- ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ -------------- -------------- ------ ------- ------ ------- -------------- ------ ------- ------ ------- -------------- ------ ------- ------ ------ ------------- ------------- ------ ------ ------ ------ ------------- --------------- ------- ------- ------- ------- --------------- ------- ------- ------- ------- --------------- ------- ------- ------- ------- -------------- ------------- ------ ------ ------ ------ ------------- ----- ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ -------------- ------------- ------ ------- ------ ------- ------------- ------ ------- ------ ------- -------------- ------ ------- ------ ------- ------------- ------------- ------ ------ ------ ------ ------------- -------------- ------- ------ ------- ------ -------------- ------- ------ ------- ------ -------------- ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ ------------- ------ ------ ------ ------ ----------- ------------- ------ ------ ------ ------ ------------- ------------- ------ ------ ------ ----- -------- -------------- ------
然后在配置中将 iconSkeletonPath 指向这个新的模板文件即可：
-------------- - - -- ------------ ----------------- ------------------------------------ -- ------- --
使用转换后的组件
转换完成后，我们可以在组件中使用这些 SVG 图标了。在 svelte 中，我们可以像下面这样使用 SVG 图标组件：
-------- ------ ---- ---- ----------------------------- --------- ----- --
在 react 中，我们可以像下面这样使用 SVG 图标组件：
------ ----- ---- -------- ------ ---- ---- ---------------------- -------- ----- - ------ ----- --- -
总结
@harryhope/svgrim 是管理 SVG 图标并将其转换为可复用组件的工具库。通过本文的介绍，我们了解了 svgrim 的基本使用方法、配置文件的作用、组件模板的定制方法，以及如何使用转换后的 SVG 图标组件。这些知识可以帮助我们更加高效地管理前端项目中的 SVG 图标，同时也可以提升我们在项目开发中的开发效率，使开发更快、更准确。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/146860