npm 包 @emotion-icons/boxicons-logos 使用教程

简介

@emotion-icons/boxicons-logos 是一个基于 Boxicons 的图标库，支持 web 和 React Native，使用 emtion 进行封装，提供零配置使用。该库提供了 175 个常用的品牌标志，比如：Facebook、Twitter、Github 等等。

安装

使用 npm 安装 @emotion-icons/boxicons-logos：

$ npm install @emotion-icons/boxicons-logos

使用

在 React 项目中，我们可以通过以下代码引入 @emotion-icons/boxicons-logos 中的图标：

import { BoxiconAdobe } from '@emotion-icons/boxicons-logos'

function MyComponent() {
  return <BoxiconAdobe />
}

图标会自动被设置为与父元素 font-size 相同的大小。你可以通过行内样式 style 或者 css 类来自定义图标大小。

支持的图标

@emotion-icons/boxicons-logos 支持 175 个品牌的图标，你可以在 Boxicons 官网 中查看每一个图标的名称和代码。下面是 @emotion-icons/boxicons-logos 中的一些常用品牌图标。

示例

下面是一个简单的 React 组件示例，包含了 @emotion-icons/boxicons-logos 的使用。

-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- -----------------
------ - ------------- - ---- -------------------------------

----- ------- - ---------
  -------- -----
  ------------ -------
  ---------- -----
  ------ -----
  ---------------- -----
  ------- -
    ------ --------
  -
-

----- ---- - ------------
  ------------ ----
-

-------- ------------- -
  ------ -
    -------- --------------------------
      -------------- --
      -------------------
    ----------
  -
-

总结

@emotion-icons/boxicons-logos 提供了大量常用品牌的图标，使用起来十分简便。通过引入这个库，可以大大降低前端开发过程中的工作量，提高开发效率。希望本文能够对你在使用之中有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24a39f3b0ab45f74a8b8eb