在现代 Web 开发中，图标往往是必不可少的一部分。而使用图标库简化了我们添加图标的步骤。@styled-icons/remix-line 是一个优秀的图标库 npm 包，以下是它的使用教程。
安装
使用 npm，可以通过以下命令安装 @styled-icons/remix-line：
npm install @styled-icons/remix-line
使用
使用该包需要在项目中导入所需的图标，因此，为了减少导入操作的重复性，可以使用如下配置：
import * as RemixIcons from "@styled-icons/remix-line";
const Icon = ({ icon, ...props }) => {
const TheIcon = RemixIcons[icon];
return <TheIcon {...props} />;
};其中，Icon 是简单的 React 组件，它可以渲染任何通过 "@styled-icons/remix-line" 导出的图标。
例如，我们要添加一个表示文件的图标，可以按照以下步骤操作：
- 将文件夹中的文件 icon/remix/FolderLine.js 复制到我们的项目中
- 添加以下代码：
<Icon icon="FolderLine" />
当然，如果要改变图标的大小，颜色等属性，可以使用 props 传递相关参数：
<Icon icon="FolderLine" size={24} color="red" />以上代码将显示一个大小为 24，颜色为红色的文件夹图标。
示例代码
-- -------------------- ---- -------
------ - -- ---------- ---- ---------------------------
----- ---- - -- ----- -------- -- -- -
----- ------- - -----------------
------ -------- ---------- ---
--
----- --- - -- -- -
------ -
-----
----- ----------------- --
----- ------------------- --------- ----------- --
------
--
--在这个简单示例中，我们展示了如何使用 @styled-icons/remix-line 套件中的 FolderLine 和 FileTextLine 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf6b5cbfe1ea06105fc