搜索插件、代码仓与 APP 分类

iconify_design 封面
插件详情v1.0.2

iconify_design

一个 Flutter 包,可让您轻松使用来自 iconify.design API 的图标。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1260
喜欢数
22
Pub 分数
160

安装插件

flutter pub add iconify_design

插件介绍

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

Iconify Design 是一个 Flutter 包,可简化将 iconify.design API 中的图标集成到 Flutter 应用程序中的过程。它使开发者能够轻松搜索、加载和显示跨多个平台的数千个可缩放矢量图标。该包支持动态图标获取、主题感知渲染以及高效的缓存,以实现最佳性能。通过最少的设置,它在不增加应用大小的情况下增强了 UI 设计的灵活性。

适合场景

  • 在跨平台应用中集成可扩展图标
  • 通过按需图标减少资产包大小
  • 通过庞大的图标库增强用户界面
  • 支持深色/浅色模式图标变体
  • 构建响应式且可访问的界面

主要特点

  • 与 iconify.design API 的直接集成
  • 动态图标加载和缓存
  • 跨平台支持(Android、iOS、Web、macOS、Windows、Linux)
  • 轻量且模块化的设计
  • 自动主题图标切换
  • 可搜索的图标目录

适合对象

  • 寻求大型图标库的开发者
  • 需要可缩放矢量图形的项目
  • 面向多个平台的应用程序
  • 希望灵活管理图标的UI设计师
  • 注重性能和可维护性的团队

使用建议

  • 需要互联网连接以获取初始图标
  • 如果一次性加载大量图标,可能会影响启动时间
  • 依赖外部API的可用性
  • 与本地资产相比,自定义选项有限
  • 在慢速网络上获取图标时可能出现延迟

原始 README

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

Iconify Design

A Flutter package that allows you to use icons from the Iconify.design API with ease. This package provides a widget called IconifyIcon that takes an icon string and optionally allows you to specify the size, color, placeholder, and error widget of the icon.

iconify-design

Installation

Add the following to your pubspec.yaml file:

dependencies:
  iconify_design: ^1.0.2

Then run:

flutter pub get
Usage
import 'package:iconify_design/iconify_design.dart';
import 'package:flutter/material.dart';
Example

Here is an example of how to use the IconifyIcon widget:

import 'package:flutter/material.dart';
import 'package:iconify_design/iconify_design.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Iconify Flutter Example'),
        ),
        body: Center(
          child: IconifyIcon(
            icon: 'mdi:home',
            size: 48.0,
            color: Colors.blue,
            placeholder: CircularProgressIndicator(),
            errorWidget: Icon(
              Icons.error_outline,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}
Parameters

The IconifyIcon widget has the following parameters:

  1. icon: The icon string (e.g., 'mdi:home', 'iconoir:fill-color-solid', etc.).
  2. size (optional): The size of the icon. Default is 24.0.
  3. color (optional): The color of the icon. Default is Black. Passing null also falls back to Black.
  4. placeholder (optional): The widget to display while the icon is loading. Default is a small circular progress indicator.
  5. errorWidget (optional): The widget to display when the icon cannot be loaded. Default is an empty widget.
Custom Placeholder and Error Widget

You can customize the loading and error states:

IconifyIcon(
  icon: 'mdi:home',
  placeholder: const SizedBox(
    width: 24,
    height: 24,
    child: CircularProgressIndicator(strokeWidth: 2),
  ),
  errorWidget: const Icon(
    Icons.error_outline,
    color: Colors.red,
  ),
)
Contribution

Feel free to open issues or submit pull requests to help improve this package.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

Don't forget to support (if you can).

"Buy Me A Coffee"

Maintainers

所属分类

依赖

依赖清单 4 项

源码仓库

使用此插件的项目

暂无相关数据。