前言
在前端开发中，我们经常会用到一些图标，例如箭头、菜单、搜索等等，而手动绘制这些图标，不但费时费力，而且还不一定效果好。因此，很多前端开发者选择使用图标库，如 Font Awesome 和 Material Icons。不过，有时候我们需要一些更特别的图标，而这些图标可能并不包含在常用的图标库中。这时，@styled-icons/styled-icon 这个 npm 包就可以为我们提供帮助。
简介
@styled-icons/styled-icon 是一个提供多种图标的 npm 包，其中包含了各种不同类型的图标，如社交媒体图标、箭头、音频图标等等。@styled-icons/styled-icon 使用了 React 和 styled-components 技术，同时它不依赖于任何特定的 UI 框架，可以与任何现有的项目集成。
安装
使用 @styled-icons/styled-icon，我们需要在项目中安装它。可以使用 npm 或者 yarn 安装。
npm install @styled-icons/styled-icon
或者
yarn add @styled-icons/styled-icon
安装完成后，我们需要在项目中引用这个包。可以通过以下方式进行引用。
import { Facebook } from '@styled-icons/styled-icon';上述代码引入了 Facebook 图标。
使用
@styled-icons/styled-icon 提供了多种方式使用图标。以下是其中两种常用的方式。
在 JSX 中使用
我们可以将图标作为组件在 JSX 中使用。
-- -------------------- ---- -------
------ - -------- - ---- ----------------------------
----- ----------- - -- -- -
------ -
-----
--------- --------- --
------
-
-在上述示例中，我们将 Facebook 图标作为组件使用，并指定了它的大小为 36。
在 CSS 中使用
我们还可以在 CSS 中使用图标，这种方式使用时，需要先将图标设置为 background-image。
.my-class {
width: 36px;
height: 36px;
background-image: url('@styled-icons/styled-icon/Facebook');
background-size: contain;
background-repeat: no-repeat;
}图标定制
@styled-icons/styled-icon 中提供了多种自定义图标的方式。
修改颜色
我们可以使用 styled-components 的方式修改图标的颜色。
-- -------------------- ---- -------
------ - -------- - ---- ----------------------------
------ ------ ---- --------------------
----- -------------- - -----------------
------ -----
-
----- ----------- - -- -- -
------ -
-----
--------------- --------- --
------
-
-上述代码中，我们使用 styled-components 的方式定义了一个新的组件 StyledFacebook，并设置了蓝色的颜色。
修改大小
我们可以通过设置 size 属性来修改图标的大小。
<Facebook size="48" />
修改其他属性
我们还可以修改其他一些属性，如 viewBox、aria-label 等，具体可参考官方文档。
总结
@styled-icons/styled-icon 是一个方便实用的 npm 包，可以为我们提供多种图标，而且使用非常方便。通过本文的介绍，相信读者已经了解了它的基本使用方法和一些常用的自定义方式。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf6b5cbfe1ea06105fd