在 React 中使用 SVG 图标的最佳方法。
我刚开始使用 React 时，使用过React Icons或Bootstrap Icons等库来管理图标。
但问题很快就出现了，第一个问题是并非所有这些软件包都支持tree shaking。如果没有 tree shaking，当你构建网站时，库中的所有图标都会被包含在你的构建中，而不仅仅是你使用的那些。
第二个问题是这些库的配置和管理可能比较复杂。那么有没有更好的方法呢？让我来告诉你。如果你是 React 新手，你可能不知道，但实际上你可以直接将 SVG 图标用作 React 组件。那么我们该怎么做呢？
创建组件
使用此 SVG 图标（来自Hero Icons）
此SVG图标包含以下代码：
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
首先，你需要移除该xmlns属性，因为 React 在渲染 SVG 时不会用到它。此外，你还需要将该class属性替换为其他属性className，使其符合 React 的要求。你的 SVG 现在看起来会是这样：
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
现在你已经准备好创建 React 组件了。我建议创建一个函数式组件。
import React from "react";
export const AcademicIcon = () => {
return (
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
/>
</svg>
);
};
现在你已经可以使用这个组件了！你可以像这样在其他 React 组件中直接使用它：
import React from 'react'
import { AcademicIcon } from './AcademicIcon.js'
export const App = () => {
return (
<div>
<AcademicIcon />
</div>
)
}
添加道具
使用 SVG 作为 React 组件的一个好处是，您可以像给其他组件添加属性一样给它添加属性。让我们给AcademicIcon组件添加一些属性，使其更加灵活。
import React from "react";
export const AcademicIcon = ({ className = "h-6 w-6", fill = "none", stroke = "currentColor", stokeWidth = 2}) => {
return (
<svg className={className} fill={fill} viewBox="0 0 24 24" stroke={stroke}>
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width={strokeWidth}
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
/>
</svg>
);
};
在最终版本中，我们将 `<icon>` className、fill` stroke<icon>` 和`<icon>` 移到strokeWidth了一个 prop 中，并赋予它原始值的默认值。现在您可以使用 props 调用您的图标：
import React from 'react'
import { AcademicIcon } from './AcademicIcon.js'
export const App = () => {
return (
<div>
<AcademicIcon
className="h-12 w-12"
fill="red"
strokeWidth={3}
/>
</div>
)
}
由于所有属性都有默认值，因此您可以声明包含所有属性、部分属性或不包含任何属性的图标！使用这种方法，您只会加载正在使用的图标，不会在构建时加载额外的代码！
如果你喜欢这篇文章，请查看我博客上的其他文章。你也应该看看我的最新项目：超棒的开发者工具。
文章来源：https://dev.to/sgolovine/the-best-way-to-use-svg-icons-in-react-3ckm