简介
@kinkajou/svg-icon 是一个轻量级的 SVG 图标组件库，它提供了 80 多种常用的 SVG 图标，并支持自定义 SVG 图标。它适用于前端项目中，特别是 React 项目。
@kinkajou/svg-icon 可以很方便地让开发者在项目中使用 SVG 图标。
安装
要安装 @kinkajou/svg-icon，只需在项目中运行以下命令：
--- ------- ------------------
使用
使用 @kinkajou/svg-icon 很简单。首先，在项目中导入要使用的图标：
------ - --------- - ---- ---------------------
然后将其渲染到组件中：
-------- ------------- -
------ -
---- -------------------------
---------- --
------
--
-这里的 IconClose 就是一个 SVG 图标。
@kinkajou/svg-icon 还支持更多的 SVG 图标，你可以在它的 GitHub 仓库 中查看所有可用的图标。
自定义 SVG 图标
除了默认的 SVG 图标之外，@kinkajou/svg-icon 也支持自定义 SVG 图标。在使用前，你需要导入一个 SVG 图标，将其加入到你的项目中，并在代码中引用它。
例如，你可以这样引用一个本地的 SVG 图标：
------ ------ ---- ---------------
然后将它渲染到组件中：
-------- ----------------- -
------ -
---- --------------------
------- --
------
--
-高级使用
考虑到一些项目中可能需要自定义一些样式，@kinkajou/svg-icon 提供了一些配置选项，以下是常见的选项和示例代码：
1. 设置 SVG 标签的样式
默认情况下，SVG 标签的样式类是 "svg-icon"。你可以覆盖这个样式类来设置所有的 SVG 图标的样式。
--------- - ----- ---- ------ ----- ------- ----- -
2. 自定义每个 SVG 图标的样式
你也可以自定义每个 SVG 图标的样式。例如，你可以将 IconClose 中的样式类更改为 "svg-icon-close" 并将它添加到 CSS 样式表中：
--------------- - ----- ---- ------ ----- ------- ----- -
然后在组件中为 IconClose 添加这个自定义样式类：
-------- ------------- -
------ -
---- -------------------------
---------- -------------------------- --
------
--
-这里，我们使用 className prop 为 IconClose 添加了自定义样式类。
3. 限制 SVG 图标的大小
有时候，SVG 图标的大小可能会超过你想要的大小。 @kinkajou/svg-icon 允许你指定每个 SVG 图标的最大宽度和高度。
------ - ---------- ------------- - ---- ---------------------
--------- - ----- ---- ---------- ------------------- ----------- ------------------- -
4. 自定义默认的 SVG 图标
如果你想用自己的 SVG 图标替换默认的图标，可以将默认图标的组件导入到你的代码中，然后修改其中的 SVG 路径。以下是一个例子：
------ - --------- - ---- ---------------------
------ ----- ---- --------
-------- ------------------ -
------ -
---------- -----------
----- ----------- ------------- ----- ---- ---- --------- --
------------
--
-总结
使用 @kinkajou/svg-icon，你可以很方便地在项目中使用 SVG 图标，并支持自定义 SVG 图标。通过这篇文章，你学习了如何使用和配置它，并且你还学习了一些高级用法，它将有助于加快你项目的开发速度。希望你能在你的项目中有效地使用它！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e8d9381d61a3540b92