Iconoir

什么是 Iconoir？

Iconoir 是一个开源图标库，包含 1600 多个独特的 SVG 图标，均基于 24x24 像素网格设计。

在 iconoir.com 浏览 →

基本用法

您可以直接从 https://iconoir.com 下载该图标包中的任何图标，或从本仓库获取。

这些图标也可通过 iconoir NPM 包获取：

npm	Yarn	pnpm	Bun
npm i iconoir	yarn add iconoir	pnpm add iconoir	bun add iconoir

使用示例：

import Iconoir from 'iconoir/icons/iconoir.svg';

React

名为 iconoir-react 的 React 库已发布。

有关更多详细信息，请参阅该包的 README。

React Native

名为 iconoir-react-native 的 React Native 库已发布。

有关更多详细信息，请参阅该包的 README。

Vue

名为 @iconoir/vue 的 Vue 库已发布。

有关更多详细信息，请参阅该包的 README。

Flutter

名为 iconoir_flutter 的 Flutter 库已发布。

有关更多详细信息，请参阅该包的 README。

Framer

Iconoir 已愉快地集成到 Framer 中。

开始使用图标：在顶部菜单中，依次选择 Insert（插入）> Graphics（图形）> Iconoir。

您可以在编辑器右侧的边栏中切换不同图标。

CSS

导入 CSS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />

以下是 HTML 中的一个示例：

<i class="iconoir-hand-brake"></i>

类名必须始终为 "iconoir-"，后跟图标名称。你可以在此处找到图标名称。

图标默认是 display: inline-block，并采用当前字体大小。你可以通过调整元素的 ::before 样式（图标作为遮罩添加到此处）来控制这一点。

Figma

该库可在 Figma 社区中获取，链接为此处。

Swift Package

要将 Iconoir-swift 添加到你的 Xcode 项目，请按照以下步骤操作：

1. 在 Xcode 中，打开你的项目并导航至 文件 > Swift 包 > 添加包依赖项...
2. 输入仓库 URL：https://github.com/iconoir-icons/iconoir-swift.git
3. 选择你要添加的分支或版本，然后点击 下一步。
4. 选择你要使用该包的目标，然后点击 完成。

UIKit

import UIKit
import Iconoir

let imageView = UIImageView(image: Iconoir.bell.asUIImage)

SwiftUI

import SwiftUI
import Iconoir

struct ContentView: View {
    var body: some View {
        Iconoir.bell.asImage
            .foregroundColor(.blue)
            .font(.system(size: 24))
    }
}

许可协议

MIT 许可协议。