Flutter/Vue 开发者必备！Iconoir 免费 SVG 图标一键获取 2025 最新方法

? 开发者福音！Flutter 和 Vue 项目如何高效获取 Iconoir 免费 SVG 图标

? 为什么选择 Iconoir？

? 一键获取 Iconoir 图标的三种方法

方法一：直接从官网下载

方法二：使用 NPM 包

npm install iconoir

方法三：使用自动化工具

1. 安装插件：

npm i vite-plugin-svg-icons -D

2. 在 vite.config.ts 中配置插件：

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]
};

3. 将下载的 SVG 文件放在 src/assets/icons 目录下，然后在组件中使用：

1. 安装 flutter_svg 插件：

flutter pub add flutter_svg

2. 将 SVG 文件放在 assets/icons 目录下，并在 pubspec.yaml 中配置：

flutter:
  assets:
    - assets/icons/

3. 在代码中使用：

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/home.svg',
  color: Color(0xFF333333),
  height: ,
  width: ,
);

? 注意事项

1. 版权问题：虽然 Iconoir 免费且允许商用，但使用时仍需遵守 MIT 协议，不要将图标作为独立图标库重新分发。
2. 图标兼容性：部分图标可能没有填充样式，或者在不同框架中的显示效果略有差异，建议在使用前先进行测试。
3. 性能优化：如果项目中使用了大量图标，建议使用按需加载的方式，减少资源冗余。

? 实际应用案例

Flutter 项目中的应用

1. 从官网下载购物车图标的 SVG 文件。
2. 将文件放在 assets/icons 目录下。
3. 在 Flutter 代码中使用 SvgPicture.asset 加载图标，并设置颜色和尺寸。

Vue 项目中的应用

1. 安装 NPM 包并引入 Iconoir 组件。
2. 在导航栏组件中使用标签，设置相应的 name、size 和 color 属性。

? 社区支持与资源

? 总结