Duo 图标 - 反应
Duo Icons for React 提供轻量级的,被作为 React 组件执行的 duotone SVG 图标集. 对于现代的网络应用来说,每个图标都有两层(初级和二级),用于两种特效.
安装
使用 npm 或 纱线安装 :
npm install @duo-icons/react
# or
yarn add @duo-icons/react
同伴依赖关系
react
确保安装在您的工程中 .
基本用途
导入单个图标并在 JSX 中使用 :
import { AddCircle } from '@duo-icons/react';
function App() {
return (
<div>
<AddCircle />
<AddCircle size={32} className="text-red-500" />
</div>
);
}
图标接受标准SVG道具(fill, (中文(简体) ), stroke, (中文(简体) ), aria-*等)和a size 道具为方便.
可用图标
所有可用图标的完整收藏在 https://duoicons.vercel.app/ 互联网档案馆的存檔,存档日期2013-12-02,提供必要的资源,在您的项目中执行这些内容.
支持选项( O)
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
size | number | 24 | 以像素计的宽度/ 高度 |
className | string | —— 说 | 适用于 <svg> 元素 |
| .svg道具 | React.SVGProps | —— 说 | 任何有效的 SVG 属性( 例如 ). fill, (中文(简体) ), stroke, (中文(简体) ), aria-label(中文(简体) ) |
Duotone 层
每个图标标记包括:
.duo-icons-primary-layer- 主/填充路径.duo-icons-secondary-layer- 二级/强化路径(不透明).3(默认)
您可以使用 CSS 或 通用框架来设置这些样式 .
样式
尾风 CSS 示例
用 Tailwind 的公用事业自定义您的外观; 您也可以用自定义的公用事业自定义层 duo-icons-primary 财务报告和审定财务报表 duo-icons-secondary 国家 @duo-icons/tailwind/base。 。 。 .
<AddCircle className="text-blue-500" />
<AddCircle className="text-green-600 duo-icons-secondary:text-green-500" size={32} />
普通 CSS 软件
.icon-large {
width: 48px;
height: 48px;
color: #1a73e8;
}
.icon-large .duo-icons-secondary-layer {
opacity: 0.4;
}
<AddCircle className="icon-large" />
实例
大小和颜色变化
<div className="flex gap-4">
<AddCircle size={16} className="text-red-500" />
<AddCircle size={24} className="text-yellow-500" />
<AddCircle size={32} className="text-green-500" />
</div>
图标按钮
<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
<AddCircle size={20} />
Add Item
</button>
无障碍
<AddCircle aria-label="Add item" />
补充说明
- 图标是纯功能组件;树在现代捆绑机中震动.
- 仅导入您需要减小捆绑大小的图标 .
- 您可以使用
import()。 。 。 .
许可证
麻省理工学院
支助
如果您发现 Duo 图标有用, 请考虑通过捐赠支持项目 :