简介
@styled-icons/boxicons-regular 是一个用于实现矢量图标的 npm 包。它提供了一组常见的 Boxicons 字体库的图标，可以轻松实现自定义图标的设计和开发。
安装
使用 @styled-icons/boxicons-regular 只需要安装两个包：styled-components 和 @styled-icons/boxicons-regular。你可以通过 npm 命令行安装:
npm install styled-components @styled-icons/boxicons-regular
如何使用
在你的项目中，你需要导入所需的图标，以及 styled-components ，并在元素中使用图标：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
------ - -------- ------ - ---- ---------------------------------
----- ------------- - -----------
-------- -----
---------------- -------------
------------ -------
--
----- --- - -- -- -
---------------
-------- --------- -------------- --
------- --------- ----------- --
----------------
--
------ ------- ----具体操作
@styled-icons/boxicons-regular 的使用示例。
1. 安装 required packages
在你的项目中，你需要安装 styled-components 和 @styled-icons/boxicons-regular：
$ npm install styled-components @styled-icons/boxicons-regular
2. 导入所需的图标
要使用来自 @styled-icons/boxicons-regular 的矢量图标，你需要在你的 JS/TS 代码中导入它们。假设你需要两个不同的图标：Home 和 Search：
import React from 'react';
import styled from 'styled-components';
import { Home, Search } from '@styled-icons/boxicons-regular';3. 新增样式
创建一个样式化组件，用于渲染所需的图标：
const StyledIcon = styled(({ size, ...rest }) => <rest.type {...rest} />)`
width: ${({ size = '24px' }) => size};
height: ${({ size = '24px' }) => size};
`;4. 调用所需的图标
调用你选择的图标：Home 和 Search。
-- -------------------- ---- -------
----- ------------- - -----------
-------- -----
---------------- -------------
------------ -------
--
----- --- - -- -- -
---------------
----------- --------- --------- --
----------- ----------- --------- -------------- --
----------------
--
------ ------- ----在浏览器中查看结果就会发现你看到的两个 Boxicons 图标已被正确渲染。
结论
使用 @styled-icons/boxicons-regular，我们可以轻松实现自定义图标的设计和开发。这个库提供了一组经过优化的 Boxicons 字体库的图标，我们可以在 React 和其他前端框架中简单地使用它们。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaeeb5cbfe1ea06105da