npm 包 @kinkajou/svg-icon 使用教程

简介

@kinkajou/svg-icon 是一个轻量级的 SVG 图标组件库，它提供了 80 多种常用的 SVG 图标，并支持自定义 SVG 图标。它适用于前端项目中，特别是 React 项目。

@kinkajou/svg-icon 可以很方便地让开发者在项目中使用 SVG 图标。

安装

要安装 @kinkajou/svg-icon，只需在项目中运行以下命令：

npm install @kinkajou/svg-icon

使用

使用 @kinkajou/svg-icon 很简单。首先，在项目中导入要使用的图标：

import { IconClose } from "@kinkajou/svg-icon";

然后将其渲染到组件中：

function CloseButton() {
  return (
    <div className="close-button">
      <IconClose />
    </div>
  );
}

这里的 IconClose 就是一个 SVG 图标。

@kinkajou/svg-icon 还支持更多的 SVG 图标，你可以在它的 GitHub 仓库 中查看所有可用的图标。

自定义 SVG 图标

除了默认的 SVG 图标之外，@kinkajou/svg-icon 也支持自定义 SVG 图标。在使用前，你需要导入一个 SVG 图标，将其加入到你的项目中，并在代码中引用它。

例如，你可以这样引用一个本地的 SVG 图标：

import MyIcon from './myicon.svg';

然后将它渲染到组件中：

function MyIconComponent() {
  return (
    <div className="my-icon">
      <MyIcon />
    </div>
  );
}

高级使用

考虑到一些项目中可能需要自定义一些样式，@kinkajou/svg-icon 提供了一些配置选项，以下是常见的选项和示例代码：

1. 设置 SVG 标签的样式

默认情况下，SVG 标签的样式类是 "svg-icon"。你可以覆盖这个样式类来设置所有的 SVG 图标的样式。

.svg-icon {
  fill: red;
  width: 24px;
  height: 24px;
}

2. 自定义每个 SVG 图标的样式

你也可以自定义每个 SVG 图标的样式。例如，你可以将 IconClose 中的样式类更改为 "svg-icon-close" 并将它添加到 CSS 样式表中：

.svg-icon-close {
  fill: red;
  width: 16px;
  height: 16px;
}

然后在组件中为 IconClose 添加这个自定义样式类：

function CloseButton() {
  return (
    <div className="close-button">
      <IconClose className="svg-icon-close" />
    </div>
  );
}

这里，我们使用 className prop 为 IconClose 添加了自定义样式类。

3. 限制 SVG 图标的大小

有时候，SVG 图标的大小可能会超过你想要的大小。 @kinkajou/svg-icon 允许你指定每个 SVG 图标的最大宽度和高度。

import { IconClose, MAX_ICON_SIZE } from "@kinkajou/svg-icon";

.svg-icon {
  fill: red;
  max-width: ${MAX_ICON_SIZE}px;
  max-height: ${MAX_ICON_SIZE}px;
}

4. 自定义默认的 SVG 图标

如果你想用自己的 SVG 图标替换默认的图标，可以将默认图标的组件导入到你的代码中，然后修改其中的 SVG 路径。以下是一个例子：

-- -------------------- ---- -------
------ - --------- - ---- ---------------------
------ ----- ---- --------

-------- ------------------ -
  ------ -
    ---------- -----------
      ----- ----------- ------------- ----- ---- ---- --------- --
    ------------
  --
-

总结

使用 @kinkajou/svg-icon，你可以很方便地在项目中使用 SVG 图标，并支持自定义 SVG 图标。通过这篇文章，你学习了如何使用和配置它，并且你还学习了一些高级用法，它将有助于加快你项目的开发速度。希望你能在你的项目中有效地使用它！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e8d9381d61a3540b92