套件詳情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))
    }
}