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。

GitHub

https://github.com/aloisdeniel/built_vector