built_vector
从极简的类 SVG 文件生成 Flutter 矢量代码。
用法
> pub global activate built_vector
> pub global run built_vector -i <assets file path> -o <output dart file>
一个类,其名称与您的资源节点名称相同,其中包含每个矢量节点的 void Paint(Canvas canvas, Size size, {Color fill}) 函数。
然后,您可以使用自定义画家(如 sample/lib/vectors.dart Vector 小部件)来使用它们。
文件格式
资源
资源目录是资源(目前仅限 vector)的集合。
<assets name="icons">
<vector ... />
<vector ... />
<vector ... />
</assets>
矢量
矢量是填充形状的集合。
它有几个属性:
name(必需):矢量资源的标识符viewBox(必需):包含所有形状的框 (<x> <y> <width> <height>)。fill:形状的默认填充画笔
<vector name="warning" viewBox="0 0 24 24" fill="#231F20">
<rect ... />
<circle ... />
<path ... />
</vector>
形状
形状是一组用于构建要用画笔填充的区域的指令。目前可以是 rect(矩形)、circle(圆形)或 path(路径)。
它有几个属性:
fill:形状的默认填充画笔rect-x,y,width,height:位置和大小circle-cx,cy,r:中心坐标和半径path-d:SVG 路径数据
<vector name="warning" viewBox="0 0 24 24" fill="#231F20">
<rect x="15" y="14" width="31" height="28" />
<circle cx="45.5" cy="42.5" r="15.5" fill="#C4C4C4" />
<path d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" />
</vector>
示例
要生成示例,请执行
> pub global run built_vector -i sample/assets/icons.assets -o sample/lib/icons.g.dart
sample/assets/icons.assets 文件将生成为 sample/lib/icons.g.dart。