Sketchで作ったアイコンをbase64に変換するプラグイン

2019-09-11 #Design

コーディングの手間を1つでも省きたいので表題のような事をしたかったんだけど、既にcssかhtmlのコードを書き出してくれるプラグインがありました。

Sketch Export base64/png https://github.com/jawayang/Sketch-Base64-PNG-Export

今まではブラウザ経由でこちらを使ってました。

Encode to Base64 format https://www.base64encode.org/

自分の場合はCSSを生で書く事はあんまり無いのと、テキストと差し替えてアイコンとかロゴを入れる事が多いので widthheight も一緒に欲しくて、それらの情報も含めたSassのマップのデータとしてクリップボードにコピーしてくれるプラグインが欲しいなーと思っていたので自分でも作ってみました(前述のリポジトリをフォークしてちょっと触っただけですが…)。


欲しいデータ構造の例は以下のような感じ。

$map-svg-star: (
  width: 30px,
  height: 30px,
  base64: 'iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAAm9JREFUSA21V01rFEEQfTUbg4iePAgLggFXjZt4EIyJn2CO/gFP3vwD/gA95G948uYf8KYn0agXEeNHEoggLHjwpATRNeWrTrozM9szsz2rDU1XV9V7r2u6Z3oXaNn0La5bbwnHVFsgcff2sMsTcKRB9R0us1p1nXYaejc7awOC4n7A5e3gbDakOaWYoe+xiCFeFLxTWJKzWC34GibpFQ9z1XryYdhv72kckyrm3l7ADl5FWTMsyBxeR2MRZ1rFWlNZXSwiPHbFuoYF/MHLCMe+q4OL0q94IvtZzioI6wCH8A0nIejx5J5iRi90xbESNj4VfGVgI3TBOrk2cBSb0sW2B8me2EMGFynY5VhYjE+ceBQyKwZkX+UibmduFYIVEk//N1Fb9W5B0xReMc1QHfewzxP7hAnjPdLUR2BbkGGZZ2DNoEHYJvoRp/ELT2l2bf4P24DP84acwSfPWXidXEBwjcv54hMmHo2LnHlR4yxU7EX0A07gt6t8xvtajls4wEpn8bmML1Tsgy5ReNcKNr0veTQsOWKixhWt2Ivw2lui/dzPE8dLcq50meQIohWHuOB4sFONBmyT8FyqXsgX1GLrhbUeHERiRgO2Sbgf4xzLp/wg1bTKw6VbOIjv+EFsJ4oXPHN+xZVoHLzLjuCwzOBnLF5d8TZmCRgVFbyh/6bM46p1s/lumK/cOryLjCPaqoV3RvZ3nQK36D3P1+SxZ3M2fS4GXoH5NsoRotXC/nDYJy/DHcyjzwofiV1vpWY+i1mOy/WfXM9RyrdptTB4S2W4y53u8bfUA5IPI/iCy3Is1zAOaxypTXWifxlOro7jL4uUj5CGbnNHAAAAAElFTkSuQmCC'
);

Forkしたブランチはこちら↓

Sketch Export base64/png https://github.com/is8r/Sketch-Base64-PNG-Export/tree/add-sass-map

書き出してSketch上で動作させてみたところいい感じで動いてくれました。


下記みたいな感じの mixin を作っておけば引数に前述のマップを入れるだけでアイコンを表示してくれるようになるので便利。

@mixin background-map-svg($map-svg) {
  display: inline-block;
  width: map-get($map-svg, width);
  height: map-get($map-svg, height);
  background-image: url("data:image/png;base64, #{map-get($map-svg, base64)}");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.icon-star {
  @include background-map-svg($map-svg-star);
}

これで最短3秒くらいでアイコンのCSSが書ける。

Profile

石原 悠 / Yu Ishihara

東京都杉並区在住。デザインとプログラミングとヨーグルト作りが好きです。