Iconoir：1600+免费开源图标库完整指南

【免费下载链接】iconoir An open source icons library with 1600+ icons, supporting React, React Native, Flutter, Vue, Figma, and Framer. 项目地址: https://gitcode.com/gh_mirrors/ic/iconoir

Iconoir 是一个拥有1600+独特SVG图标的开源库，所有图标均基于24x24像素网格设计，支持React、React Native、Flutter、Vue、Figma和Framer等多种平台，是开发者和设计师的理想选择。

为什么选择Iconoir？

Iconoir作为一款免费开源的图标库，具有以下核心优势：

• 丰富的图标资源：提供1600+精心设计的SVG图标，覆盖各种场景需求
• 多平台支持：无缝集成React、React Native、Flutter、Vue等主流框架
• 高度可定制：支持颜色、大小等属性调整，满足不同设计需求
• 持续更新：活跃的开发社区，定期添加新图标和功能

快速安装步骤

NPM安装

Iconoir可通过NPM轻松安装到您的项目中：

npm i iconoir

其他包管理器安装命令：

包管理器	安装命令
Yarn	yarn add iconoir
pnpm	pnpm add iconoir
Bun	bun add iconoir

直接克隆仓库

如果您需要完整的图标集，可以直接克隆仓库：

git clone https://gitcode.com/gh_mirrors/ic/iconoir

多平台使用指南

React项目

React开发者可以使用iconoir-react包：

import { Iconoir } from 'iconoir-react';

function MyComponent() {
  return <Iconoir size={24} color="currentColor" />;
}

详细使用说明请参考React包文档

Vue项目

Vue用户可以安装@iconoir/vue包：

<template>
  <Iconoir size="24" color="currentColor" />
</template>

<script>
import { Iconoir } from '@iconoir/vue';

export default {
  components: { Iconoir }
};
</script>

详细使用说明请参考Vue包文档

Flutter项目

Flutter开发者可以使用iconoir_flutter包：

Iconoir(
  Icons.iconoir,
  color: Colors.black,
  size: 24.0,
)

详细使用说明请参考Flutter包文档

CSS使用

直接在HTML中引入CSS文件即可使用：

<link rel="stylesheet" href="css/iconoir.css" />
<i class="iconoir-hand-brake"></i>

图标类名格式为"iconoir-"加上图标名称，您可以在项目的icons目录中找到所有可用图标。

设计工具集成

Figma

Iconoir在Figma社区中可用，您可以直接在Figma中搜索"Iconoir"获取完整图标集。

Framer

在Framer中使用Iconoir非常简单：

1. 点击顶部菜单Insert
2. 选择Graphics
3. 点击Iconoir

您可以在右侧边栏中轻松切换不同图标。

贡献与支持

Iconoir是一个开源项目，欢迎通过以下方式贡献：

• 提交新图标建议
• 报告bug或提出改进建议
• 改进文档或示例代码

详细贡献指南请参考CONTRIBUTING.md

许可证信息

Iconoir使用MIT许可证，您可以自由地在个人和商业项目中使用这些图标。完整许可证信息请查看LICENSE文件。

无论是开发网站、移动应用还是设计界面，Iconoir都能为您提供高质量的图标资源，帮助您打造更加专业和吸引人的产品。立即开始使用Iconoir，提升您的项目视觉体验！

【免费下载链接】iconoir An open source icons library with 1600+ icons, supporting React, React Native, Flutter, Vue, Figma, and Framer. 项目地址: https://gitcode.com/gh_mirrors/ic/iconoir