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