插件详情v7.12.1

iconoir_flutter

Iconoir 的 Flutter 库，这是最大的开源图标库，包含大量免费图标。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 5.2万
喜欢数: 39
Pub 分数: 150

安装插件

flutter pub add iconoir_flutter

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Iconoir Flutter 是一个 Flutter 包，提供对 Iconoir 的访问权限。Iconoir 是一个大型开源图标库，包含数百个免费且可自定义的图标。该包设计简洁高效，可无缝集成到所有主要平台的 Flutter 应用中。它提供一致且现代的设计语言，支持可缩放的矢量图标，能够适应不同的主题和尺寸。开发者可以轻松使用内置小部件来添加和样式化图标，非常适合需要丰富视觉反馈的应用程序。由于持续维护和不断增长的图标集合，该工具支持快速 UI 开发，且无需担心授权问题。

适合场景

移动应用界面
Web 仪表板
桌面应用程序
主题和深色模式支持
快速原型设计

主要特点

数百个免费开源图标
基于矢量的可扩展性
跨平台兼容性
与 Flutter 小部件的轻松集成
轻量且高效

适合对象

UI 设计师
前端开发人员
开源项目
需要多样化图标的应用程序

使用建议

需要手动更新以添加新图标
超出基础样式的有限自定义
依赖 Iconoir 的持续图标发布

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Iconoir

What is Iconoir?

Iconoir is an open-source library with 1600+ unique SVG icons, designed on a 24x24 pixels grid.

Browse at iconoir.com →

Basic Usage

You can download any icon of the pack directly from https://iconoir.com or get them from this repository.

The icons are also available via the iconoir NPM package:

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

Example usage:

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

React

A React library is available under the name iconoir-react.

For more details, see the package README.

React Native

A React Native library is available under the name iconoir-react-native.

For more details, see the package README.

Vue

A Vue library is available under the name @iconoir/vue.

For more details, see the package README.

Flutter

A Flutter library is available under the name iconoir_flutter.

For more details, see the package README.

Framer

Iconoir is happily part of Framer.

To start using the icons: On the top menu, Insert > Graphics > Iconoir.

You can switch between icons from the right sidebar in the editor.

CSS

Import the CSS file:

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

Here is an example in HTML:

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

The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons here.

The icons are display: inline-block and default to the current font size. You can control this by adjusting the ::before styles of the element (which is where the icons are added as a mask).

Figma

The library is available in the Figma community here.

Swift Package

To add Iconoir-swift to your Xcode project, follow these steps:

In Xcode, open your project and navigate to File > Swift Packages > Add Package Dependency...
Enter the repository URL: https://github.com/iconoir-icons/iconoir-swift.git
Choose the branch or version you want to add, and click Next.
Select the target where you want to use the package, then click Finish.

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))
    }
}