前言
随着前端技术的不断发展，我们的 UI 开发已经不再局限于传统的HTML、CSS以及 JavaScript，有越来越多的优秀的 UI 库被引入进来。其中，iconfont 可谓是我们最常用的 UI 库之一。
和其它的iconfont库不同， @emotion-icons/ionicons-solid 是一款基于 emtion CSS 框架的 iconfont 库。在本文中，我们将实现如何使用该库以及什么场景下优于其它库。
安装步骤
安装 @emotion-icons/ionicons-solid 很简单，只需在控制台上输入下述命令就可以完成：
npm install --save @emotion-icons/ionicons-solid
使用方法
使用 @emotion-icons/ionicons-solid 同其它 iconfont 库类似。使用前我们需要引入该库：
import { IconName } from '@emotion-icons/ionicons-solid';同时由于 emotion CSS 原因，我们需要在样式文件中加入下述代码
@import url("@emotion/react/css-prop");然后我们就可以正常的将图标代码渲染出来
import { IconName } from '@emotion-icons/ionicons-solid';
function MyComponent() {
return <IconName />
}剩下的内容和普通的 iconfont 类库是一致的，你需要查阅该库中所包含 icon 的名称，然后在代码中引用它。
示例代码
最后，以下示例展示了如何引用 @emotion-icons/ionicons-solid 库中 menu 的 icon，它同样适用于其他所有图标。
-- -------------------- ---- -------
------ - ------ - ---- --------------------------------
-------- ----- -
------ -
---- ----------------
------- --
------
--
-
------ ------- ----
-- -------- --
------- -------------------------------总结
我们了解了如何使用 @emotion-icons/ionicons-solid 这样基于emotion CSS 框架的iconfont 库，同时也普及了其使用方法以及一些注意事项。最后需要提醒的是，该库并不是包含每个图标的第一个选择，因此建议您在使用前先浏览库中所包含的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24a39f3b0ab45f74a8b8ff