在前端开发中，图标的应用非常广泛并且是必备的一环。@ant-design/icons-svg 是一个出色的 npm 包，提供众多漂亮的图标选择。本文将介绍该包的使用方法，并演示如何在项目中使用它。
安装和引入
使用 npm 安装 @ant-design/icons-svg：
npm install @ant-design/icons-svg --save
在代码中导入你想要的图标：
import { HomeOutlined } from '@ant-design/icons-svg';
使用
@ant-design/icons-svg 包另外提供了 Icon 属性来方便你在代码中使用图标：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------ - ---- ------------------------ ----- ------- - -- -- - ----- ------------- -- -- ------ -- ------ ------- --------展开代码
使用上述代码，我们在页面中渲染了一个带有 "首页" 文字的 Home 图标。
在找到你需要的图标后，你可以将其导入到你的项目中，也可以使用该包的 Icon 属性直接渲染。
常用图标集
@ant-design/icons-svg 提供了大量的图标集供我们使用，下面列出了部分常见的图标集：
Ant Design 图标集
import { AntDesignOutlined, AccountBookOutlined, AlertOutlined, AimOutlined, ... } from '@ant-design/icons-svg/lib/asn';
Material Design 图标集
import { MaterialIconOutlined } from '@ant-design/icons-svg/lib/twotone';
FontAwesome 图标集
import { TwitterOutlined, LinkedinOutlined, FacebookOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons-angular/icons';
以上图标集并非全部，你可以在官网 (https://ant.design/components/icon-cn/) 找到更多图标。
总结
@ant-design/icons-svg 是一个非常方便的 npm 包，省去了自己寻找、下载图标等繁琐的步骤。希望本文的介绍能够帮助到你在项目中使用该包。
示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------ - ---- ------------------------ ----- ------- - -- -- - ----- ------------- -- -- ------ -- ------ ------- --------展开代码
import { AntDesignOutlined, AccountBookOutlined, AlertOutlined, AimOutlined } from '@ant-design/icons-svg/lib/asn';
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ant-design-icons-svg
