介绍
@pluralsight/ps-design-system-icon 是一个由 Pluralsight 设计的图标库，其中包含大量常用的图标。这个包可以被用于 web 开发中，方便地将这些图标引入到网站或者应用中。
安装
可以通过 npm 来安装这个包：
--- ------- ------ ----------------------------------
使用方法
@pluralsight/ps-design-system-icon 提供了一种简单的方式来使用这些图标。它们可以被当作 React 的组件来使用，并按照自己的需求来进行定制化。下面是一个简单的例子：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- -- -------- - ---- ------------------------------------------
----------------
-----
--------- ---------- ----------- ------------------- --
-------
-------------------------------
--这里我们直接从 @pluralsight/ps-design-system-icon 引入了 Home 这个图标。我们用 ReactComponent 来引入图标的实际内容，并且将其当作组件来使用。这个组件可以通过 props 来定制化，比如 width、height、fill 等等。
可定制化
我们可以通过样式来对图标进行自定义。由于这些图标是由 SVG 组成的，在使用时我们可以直接在 CSS 中对其进行定制，而且非常灵活。下面是一个例子：
-------- - ------ ----- ------- ----- ----- ---- -
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- -- -------- - ---- ------------------------------------------
------ ---------------
----------------
-----
--------- ------------------- --
-------
-------------------------------
--这里我们直接在 CSS 中定义了类 .my-icon，并且在 React 组件中传入了这个类。这样我们就可以通过 CSS 来定制化这个图标的样式。
总结
@pluralsight/ps-design-system-icon 提供了一种简单而又实用的方式来引入和使用图标库。如果你的 web 开发中需要用到一些常用的图标，那么这个包无疑是一个非常不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f793d0e7116197505561b1d