💎 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を生で書く事はあんまり無いのと、テキストと差し替えてアイコンとかロゴを入れる事が多いので width と height も一緒に欲しくて、それらの情報も含めた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が書ける。