前言
随着前端技术的发展，越来越多的项目需要使用 SVG 图标。但是，SVG 图标的制作和管理十分繁琐。为了解决这个问题，一些前端工程师们开发了 npm 包 svg-kit，它可以方便地管理和使用 SVG 图标。
本篇文章将介绍如何使用 svg-kit 并提供示例代码。希望能帮助大家更好地了解和使用 svg-kit。
安装
安装 svg-kit 很简单，只需要在终端中执行以下命令即可：
npm install svg-kit --save
使用
导入 icon
使用 svg-kit 的第一步是导入 icon。通过以下代码将 icon 导入项目中：
import { Icon } from 'svg-kit'
import 'svg-kit/lib/styles/index.css'
ReactDOM.render(<Icon type="heart" />, mountNode)其中，icon 需要使用 Icon 组件来渲染。type 属性指定了要渲染的 icon 的名称。例如，type="heart" 会渲染一个红心的 icon。
配置
svg-kit 支持一些全局配置，可以使用 setConfig 方法来设置。例如，可以通过以下代码将 icon 的默认尺寸设置为 20：
import { setConfig } from 'svg-kit'
setConfig({
size: {
width: 20,
height: 20,
}
})自定义 icon
svg-kit 还支持自定义 icon。只需要将 svg 文件导入到项目中，并使用 createFromIconfontCN 方法来创建 iconfont 的组件。
import { createFromIconfontCN } from 'svg-kit'
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1274171_3c3xzvfr3qt.js',
})
ReactDOM.render(<MyIcon type="icon-heart" />, mountNode)其中，scriptUrl 是阿里图标库的脚本链接，可以使用自己项目的脚本链接。
常用 icon
svg-kit 内置了一些常用的 icon 可以直接使用。例如，可以使用以下代码渲染一个箭头的 icon：
<Icon type="arrow-up" />
如下是一些常用的 icon：
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- check-circle
- minus-circle
- plus-circle
- info-circle
- exclamation-circle
- loading
示例代码
下面是一个完整的使用 svg-kit 的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ----- ---------- -------------------- - ---- ---------
------ ------------------------------
-----------
----- -
------ ---
------- ---
-
--
----- ------ - ----------------------
---------- ------------------------------------------------
--
-------- --- -- -
------ -
-----
----- ------------ --
----- ------------------ --
------- ----------------- --
------
-
-
-------------------- --- ----------总结
svg-kit 是一款使用方便的 npm 包，可以方便地管理和使用 SVG 图标。本文介绍了如何使用 svg-kit，并提供了示例代码。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67863