flutter使用阿里矢量图库管理项目svg图片

939 阅读1分钟

为什么使用阿里矢量图库

1 方便管理项目图标和协调开发

2 svg图标占用内存小

3 不用切多套图去适配手机

4 代码支持图片颜色修改

5 模块开发可以复用图片

1 登录阿里矢量图标库

iconfont-阿里巴巴矢量图标库

创建项目 上传项目需要的svg图标 image.png

2安装脚手架,(作用:通过命令自动生成需要的图标资源代码,)

下载 | Node.js (nodejs.org)

安装后执行下面命令

1安装 flutter-iconfont-cli命令

npm install flutter-iconfont-cli -g

2生成 iconfont 配置文件命名

npx iconfont-init

image.png

点击打开 iconfint.json文件,复制阿里矢量图库项目中的.js代码,粘贴到 symbol_url

image.png

image.png

3 更新图标命令(生成icon_font.dart文件)

npx iconfont-flutter

image.png

 3项目集成第三方svg库

在pubspec.yaml添加flutter_svg: ^0.22.0 # 加载 iconfont 图片 点击pub get

image.png

4 项目中代码使用

 IconFont( IconNames.deletepic, size: 50, color: '#EFF0F1', colors: ['#D20A0A',], ),

属性:

deletepic:需要的图标名称,

size:图片大小

color 图片的颜色(覆盖表面)

colors 图片的背景颜色(背景颜色)