この記事の実践編

背景

モックアップをdraw.ioを何度か使うことがあった。フロントエンドをAngular+PrimeNGで実装するため、draw.ioでPrimeNGのアインコンを使いたかった。しかし、draw.ioにPrimeNGのアイコンが使えなかった（ライブラリがなかった）ため、手作業でライブラリを作る必要があった。
今後、このような作業を手作業でしたくないので、本ツールを作成した。

本ツールでできること

以下３点の処理をすることで、draw.ioでSVGアイコンのライブラリを自動で作成する。また、ライブラリ内のSVGの色などもdraw.ioで変更できるようになる。

SVGファイルを読み込み、draw.ioのライブラリとして出力する
SVGにstyleタグがない場合、自動でタグを挿入する
draw.ioのstyle情報に"editableCssRules=.*"を追加する

動作

CLIツールなので、ターミナルで実行する

diolibgenをgithubからクローンする

git clone https://github.com/capybara-alt/diolibgen

外部ライブラリをインストール

go mod tidy

diolibgen/inputディレクトリに、対象のSVGファイルを配置
diolibgenを実行

go run main.go
# or
go build main.go && ./main

実行結果(例)

ターミナル

draw.ioでインポート