随着前端技术的发展，SVG 图标在网站和应用中的使用越来越普遍。在实现 SVG 图标的使用过程中，我们发现 FontAwesome 提供的免费 SVG 图标库 @fortawesome/free-regular-svg-icons 是一个非常实用的工具包。下面是一份详细的使用指南。
安装
要使用 @fortawesome/free-regular-svg-icons，首先需要安装它。你可以在你的项目目录中使用以下命令来安装：
npm install --save @fortawesome/free-regular-svg-icons
导入至项目
一旦安装完成，可以将需要的图标导入至项目中。可以通过以下方式导入整个库：
import { library } from '@fortawesome/fontawesome-svg-core'; import { far } from '@fortawesome/free-regular-svg-icons'; library.add(far); // 将所有的 Regular Icon 导入
也可以仅导入需要使用的图标:
import { faFileAlt } from '@fortawesome/free-regular-svg-icons'; console.log(faFileAlt); // 打印 faFileAlt 的数据信息
如果需要使用多个图标，可以一次性导入多个：
import { faFileAlt, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
使用
在导入所有需要使用的图标之后，就可以在项目的其他部分使用它们了。您可以使用 FontAwesome 提供的 React 组件或直接使用 SVG 标记进行渲染。例如：
-- -------------------- ---- ------- ------ - --------------- - ---- --------------------------------- -------- ------------- - ------ - ----- ---------------- ---------------- -- ---------------- -------------------- -- ------ -- -展开代码
或者，如果您不使用 React，可以在 HTML 中使用直接生成 SVG 标记：
-- -------------------- ---- ------- ------ ------ ------- ---------------------------------------------------------------------- ------- ------ -- ---------- ----------------- -- ---------- --------------------- ------- -------展开代码
总结
@fortawesome/free-regular-svg-icons 提供了大量的免费 SVG 图标，您可以在自己的项目中免费使用。使用它非常容易，您只需要安装它，并将需要的图标导入到您的项目中即可随意使用。希望这篇文章能够帮助您更好地使用 FontAwesome 提供的免费 SVG 图标库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fortawesome-free-regular-svg-icons
