介绍
@emotion-icons/typicons 是一个为 React 应用设计的图标库，它可以为 Web 网站提供清新、美观的图标，同时支持自定义样式。
该图标库基于 Typicons 的图标集，它提供了 326 个矢量化的、可缩放的图标，可以用于设计用户界面、跨平台移动应用和 Web 应用。
安装
要使用@emotion-icons/typicons，需要先下载并安装 Node.js，然后使用 npm 安装该包：
npm install @emotion-icons/typicons
示例
下面是一个简单的使用示例，在这个示例中，我们要在网页中使用一个“搜索”图标：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- -------------------------- ----- --- - -- -- - ----- --------- ----------- ------- ---------- -- ------ -- ------ ------- ----展开代码
在这个示例中，我们首先导入 React 和 @emotion-icons/typicons 中的 Search 图标，然后在应用程序中使用 Search 组件，指定了图标的大小为 2em。
自定义样式
要自定义 @emotion-icons/typicons 的样式，可以借助 emotion 库中的 css 函数，来构建样式类，并将其绑定到图标上。
例如，我们要将“搜索”图标的颜色变为红色，可以按照如下方法构建样式类：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- -------------------------- ------ - --- - ---- ----------------- ----- --------- - ---- ------ ---- -- ----- --- - -- -- - ----- --------- ----------- ------- ---------- --------------- -- ------ -- ------ ------- ----展开代码
在这个示例中，我们首先使用 css 函数构建样式类 redSearch，然后在应用程序中使用 Search 组件，并将其 css 属性绑定到 redSearch 样式类。
总结
@emotion-icons/typicons 是一个非常实用的图标库，它提供了清新的图标，同时支持自定义样式。在使用时，我们要先安装该包，并导入所需的图标，然后可以在应用程序中直接使用这些图标，并指定其大小、样式等属性。如果需要自定义样式，则可以利用 emotion 库中的 css 函数来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24a3a03b0ab45f74a8b90a
