如何在Flutter中像使用FontAwesome图标一样引入Bootstrap图标（如半圆图标）

方案1：全量接入Bootstrap Icons库（和FontAwesome使用体验完全一致） #

适合需要用到多个Bootstrap图标的场景，用法和Flutter原生Icon、FontAwesome图标完全相同：

• 在项目pubspec.yaml的dependencies节点下添加依赖：

dependencies:
  flutter:
    sdk: flutter
  bootstrap_icons: ^1.11.3

• 执行命令安装依赖：flutter pub get
• 代码中直接调用即可：

import 'package:bootstrap_icons/bootstrap_icons.dart';

// 组件中使用
Icon(
  BootstrapIcons.circle_half,
  size: 32,
  color: Colors.blue,
)

方案2：单独引入半填充圆形图标（轻量无冗余） #

如果只需要这一个图标，不需要引入整个图标库，可直接用SVG实现：

• 在项目pubspec.yaml的dependencies节点下添加SVG解析依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.10+1

• 执行命令安装依赖：flutter pub get
• 有两种使用方式可选：
  1. 本地资源模式：将下方SVG代码保存为assets/svg/circle_half.svg，再在pubspec.yaml的flutter节点下声明资源路径

  flutter:
    assets:
      - assets/svg/
  

  代码中调用：

  import 'package:flutter_svg/flutter_svg.dart';
  
  SvgPicture.asset(
    'assets/svg/circle_half.svg',
    width: 32,
    height: 32,
    colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
  )
  

  2. 字符串模式：直接将SVG代码传入组件，无需新增资源文件：

  import 'package:flutter_svg/flutter_svg.dart';
  
  SvgPicture.string(
    '''
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
      <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
    </svg>
    ''',
    width: 32,
    height: 32,
    colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
  )
  

最终实现效果：

内容的提问来源于stack exchange，提问作者Arslan Kaleem