@ boxicons/ 反应

由 Boxicons SVG 文件所建的具有全树摇晃支持的回放图标库.

安装

npm install @boxicons/react
# or
yarn add @boxicons/react
# or
pnpm add @boxicons/react

使用量

基本用途

import { Alarm, Twitter, Home } from '@boxicons/react';

function App() {
  return (
    <div>
      <Alarm />
      <Twitter />
      <Home />
    </div>
  );
}

图标包

每个图标可以有多个变体. 使用 pack 在它们之间切换的道具 :

• 基础 - 大纲/正则样式图标(大多数图标默认)
• 已填满 - 固态/填充式图标
• 品牌 - 品牌/logo图标(对Twitter,Facebook等品牌图标的默认)

import { Alarm } from '@boxicons/react';

function App() {
  return (
    <div>
      {/* Basic/outline style (default) */}
      <Alarm />
      
      {/* Filled style */}
      <Alarm pack="filled" />
    </div>
  );
}

大小

大小预设

使用 size 方便预设大小的道具 :

<Alarm size="xs" />   {/* 16px */}
<Alarm size="sm" />   {/* 20px */}
<Alarm size="base" /> {/* 24px (default) */}
<Alarm size="md" />   {/* 36px */}
<Alarm size="lg" />   {/* 48px */}
<Alarm size="xl" />   {/* 64px */}
<Alarm size="2xl" />  {/* 96px */}
<Alarm size="3xl" />  {/* 128px */}
<Alarm size="4xl" />  {/* 256px */}
<Alarm size="5xl" />  {/* 512px */}

自定义大小

对于自定义大小, 使用 width 财务报告和审定财务报表 height 道具( 覆盖) size:

<Alarm width={32} height={32} />
<Alarm width="48" height="48" />
<Alarm width="2rem" height="2rem" />

颜色

使用 fill 更改图标颜色的道具(默认为 currentColor:

<Alarm fill="#ff0000" />
<Alarm fill="rgb(0, 128, 255)" />
<Alarm fill="currentColor" /> {/* Inherits text color */}

不透明度

控制透明度 opacity 道具 :

<Alarm opacity={0.5} />
<Alarm opacity="0.75" />

翻转

横向或纵向镜像图标 :

<Alarm flip="horizontal" /> {/* Mirrors left-to-right */}
<Alarm flip="vertical" />   {/* Mirrors top-to-bottom */}

旋转

任意旋转图标 :

<Alarm rotate={45} />      {/* Rotates 45 degrees */}
<Alarm rotate="90" />      {/* Rotates 90 degrees */}
<Alarm rotate="180deg" />  {/* Also accepts "deg" suffix */}

删除铺设

删除默认的 2px 粘贴在图标周围以进行更紧的匹配 :

<Alarm removePadding />    {/* Crops padding, viewBox becomes "2 2 20 20" */}

组合道具

所有道具都可以合并:

<Alarm 
  pack="filled"
  fill="#ffffff"
  opacity={0.8}
  size="lg"
  flip="horizontal"
  rotate={45}
  className="my-icon"
  style={{ margin: '8px' }}
/>

标准 SVG 道具

所有标准的SVG道具都得到支持并传递到下面 <svg> 元素 :

<Alarm 
  className="icon"
  id="my-alarm-icon"
  aria-label="Alarm"
  role="img"
  onClick={() => console.log('clicked')}
/>

转发

参考文献转发到SVG元素:

import { useRef } from 'react';
import { Alarm } from '@boxicons/react';

function App() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  return <Alarm ref={iconRef} />;
}

树摇

这个图书馆是完全可以树动的。 只有您导入的图标将包含在您的最后捆绑中 .

// ✅ Only Alarm is bundled
import { Alarm } from '@boxicons/react';

// ✅ Direct import also works
import { Alarm } from '@boxicons/react/icons/Alarm';

可用图标

图书馆包括所有Boxicons:

• 1884 (英语) 基本(外线)图标
• 1884 (英语) 已填入图标
• 295个 品牌图标

命名公约

图标名称从 kebab- case SVG 文件名转换为 PascalCase :

说明: 以数字开头的图标被前缀为"Icon"(例如, Icon8Ball, (中文(简体) ), Icon500px) (中文(简体) ).

说明: 一些图标有"Icon"后缀来避免与保留词相冲突(例如, ReactIcon 用于反应标志).

类型脚本

导出类型的全类型脚本支持 :

import type { BoxIconProps, IconPack, IconSize, FlipDirection } from '@boxicons/react';

BoxIcon 选项

interface BoxIconProps extends SVGProps<SVGSVGElement> {
  pack?: 'basic' | 'filled' | 'brands';
  fill?: string;
  opacity?: number | string;
  width?: number | string;
  height?: number | string;
  size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
  flip?: 'horizontal' | 'vertical';
  rotate?: number | string;
  removePadding?: boolean;
}

@ boxicons/ 反应