简介
decepticons 是一个 npm 包，它可以将 SVG 图标转换为 React 组件。使用它可以方便的在 React 项目中使用 SVG 图标，同时也不用担心图标的加载和缩放问题。
安装
decepticons 可以通过 npm 进行安装，使用以下命令即可：
npm install decepticons
使用方法
使用 decepticons 很简单，只需要通过其提供的 decepticon 函数即可将 SVG 图标转换为 React 组件。
对于 SVG 图标，我们通常会将其放在一个单独的文件中，比如 icon.svg，然后在需要使用的地方导入即可。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- -------------- ------ ---- ---- ------------- ----- ----------- - -- -- - ----- ---- - ----------------- ------ ----- --- --
decepticon 函数返回的是一个可以直接使用的 React 组件，我们可以将其渲染到页面上，也可以通过 props 传递参数来控制其行为。
参数说明
decepticon 函数支持传递一些参数来控制 SVG 图标展示的行为，其中比较常用的参数有以下几个。
fill
fill 参数用来控制 SVG 图标的填充颜色，可以接受任何有效的颜色值，比如 red、#ff0000、rgb(255, 0, 0) 等。
const MyComponent = () => {
const Icon = decepticon(icon, { fill: 'red' });
return <Icon />;
};stroke
stroke 参数用来控制 SVG 图标的描边颜色，可以接受任何有效的颜色值，同 fill。
const MyComponent = () => {
const Icon = decepticon(icon, { stroke: 'red' });
return <Icon />;
};scale
scale 参数用来控制 SVG 图标的缩放比例，可以接受任何有效的数字类型，比如 0.5、2 等。
const MyComponent = () => {
const Icon = decepticon(icon, { scale: 2 });
return <Icon />;
};size
size 参数用来控制 SVG 图标的大小，它可以接受任何有效的 CSS 尺寸值，比如 20px、1rem 等。
const MyComponent = () => {
const Icon = decepticon(icon, { size: '20px' });
return <Icon />;
};示例代码
下面是一个使用 decepticons 的示例代码，它演示了如何将 SVG 图标作为 React 组件使用，并传递参数控制其行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------
------ --------- ---- --------------
------ -------- ---- -------------
----- ---------- - -- ------ -- -- -
----- ---- - ----------------- - --------- - --------- -
----- ------ - ------- - --------
----- -------
---
------ ----- ---
--在上面的示例中，我们使用 decepticons 将两个 SVG 图标转换为 React 组件，然后将它们作为 MobileMenu 组件的图标使用。同时，我们通过 isOpen props 来控制菜单的打开和关闭状态，以及传递一些参数来控制图标的颜色和大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ab81e8991b448d4b11