对于前端开发者来说，使用 icon 可以为网站增加不少美观度，同时也可以帮助用户更轻松的理解网站内容。本文将介绍一个方便易用的 npm 包 emotion-icons，帮助你快速引入 icon 到你的网站中。
什么是 emotion-icons
emotion-icons 是一个基于 React 和 emotion 的 icon 组件库，它包含了很多常用的 icon，方便开发者直接引用使用。目前 emotion-icons 中包含 204 种 icon，其中包括了众所周知的 FontAwesome 和 Material Design 的 icon。
安装
使用 npm 进行安装：
npm install --save emotion-icons
使用示例
基本使用
emotion-icons 提供了两种使用方式：基于 React 和使用 SVG。
基于 React
emotion-icons 的大部分 icon 都是以组件的形式提供的，下面是如何使用 heart icon：
import { Heart } from 'emotion-icons';
function App() {
return <Heart size={32} />;
}使用 SVG
如果你不想使用 emotion-icons 提供的组件，你也可以直接引入对应的 svg 内容：
import { heart } from 'emotion-icons/fa';
function App() {
return <svg viewBox={heart.viewBox} width="32" height="32" dangerouslySetInnerHTML={{ __html: heart.path }} />;
}定制 icon
如果你无法在 emotion-icons 中找到你想要的 icon，你可以创建自己的 icon。
下面是一个示例：你想要一个名为 custom 的 icon，它的 SVG 路径是 'M1 1 L9 9 L1 9z'。
基于 React
使用 createIcon() 方法可以创建自己的 icon：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- -- ----- ---- ----- ---------- - --- - -- - -- ---- ----- ------ - ------------ ------------ --------- -------- -- - -- ---- ----- ----- -------------- --- --- -------- ----- - ------ ------- --- -
使用 SVG
你也可以手动创建对应的 SVG：
-- -------------------- ---- ------- ----- ---------- - --- - -- - -- ---- ----- ---------- - - -------- -- - -- ---- ----- ----------- -- -------- ----- - ------ ---- ---------------------------- ---------- ----------- -------------------------- ------- --------------- -- --- -
总结
使用 npm 包 emotion-icons 可以帮助我们快速引入 icon 到网站中，同时在自己需要创建自己的 icon 时也提供了方便的方法。希望本文对你有所帮助，欢迎留言提出意见或疑问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb69fb5cbfe1ea061159f