見出し画像

Nucleo.appはSVGアイコンマネージャの決定版

Takehiko Ono

Webサイトやアプリなどの実装を重ねていくと、多くの案件でSVGアイコンを扱う機会が多く、ファイル数も多いし時には同じアイコンを使い回すこともあることから、その管理にはかなり手間がかかる。

なのでこれまではIconsetを使ってその管理をしていたのだが、これまでフリーウェアとして利用ができていたものが、アップデート後に突如サブスクリプションウェアに変更になってしまった。アプリの機能が増していけば、そのぶんアップデートやメンテナンスにかかる手間は増大していくものなので、継続してアプリの成長させることを考えれば有償化は健全な流れだと思う。

しかしIconsetが行ったアップデートが悪手だったのは、「起動時にサブスクリプション契約を求めるアラートウィンドウが開き、契約をしない限りはアラートを閉じることが出来ず、既存データにアクセスする手段がない」ことにある。

これまでいくらお世話になったアプリといえども、自分が構築した財産ともいえるデータを人質にとるようなやり方はどうかしているとしか思えない。

そんな経緯もあってサブスクリプション契約をする気にはならず、別のアプリがないか探していたところ、Iconsetの機能を上回る素晴らしく良質なアプリにめぐりあうことが出来たので紹介したいと思う。

Nucleo.appだ。

• • •


Nucleo.appとは

Nucleoはサイトを見てもらえればわかるとおりだが、3万点以上のオリジナルSVGアイコンを提供している。

3万点という数はほとんどの用途をカバーできると思われる桁外れの量だが、各アイコンのクオリティも極めて高く、同じ内容のアイコンでもサイズ別や、Fill（塗りつぶし）・Outline（縁取り）・Color（色付き）のバリエーションが用意されており使い勝手が良い。しかも買い切りで99ドルという値段も良心的だ。

そしてそのNucleoアイコンの管理のために用意されたアプリがNucleo.appということになるのだが、素晴らしいのはNucleo以外のSVGアイコンも統合的に扱える機能を持っていることだ。しかも、Nucleo.app自体は無償で配布されている。


あらゆるSVGアイコンをインポートしてみた

Boxicons、Google Material Icons、Foundation、Font Awesome… など、探してみれば商用利用も可能なものも含め、多くのクオリティの高いフリーのSVGアイコンが配布されている世の中だ。

これまでにダウンロードして保管していたそれらのSVGアイコンや、各種案件で作成してきたオリジナルのSVGアイコンを、Nucleo.appで全て管理ができないかと17,000個ほどライブラリにインポートしてみた。

結果、アプリが重くなることはなく膨大な数のアイコンをスクロールさせても全く問題ない様子。そもそも3万点以上のNucleoアイコンの管理を目的としているのだから、そのあたりの設計の配慮は既に盤石なのだろう。

複数のSVGアイコンを「Set」と呼ばれるフォルダのような概念で一括りにできるほか、Setをグルーピングすることでプルダウンリスト化することもできるため、一覧性も高い。


Project機能

その他、ライブラリにおけるSetやグループによる管理のほか「Project」と呼ばれるアセットリストの作成も可能になっている。

ライブラリ上での管理と異なるのは、Projectに含まれるアイコンは「インスタンス」としての扱いとなっている点だ。

オリジナルの唯一のアイコンであれば、都度ライブラリへインポートすれば良い話だが、なかには案件にまたがって使いまわす「同じ」アイコンもあるだろう。ボタンに利用する「→」矢印のようなシンプルなアイコンや各種SNSアイコンは、既存のものを使う機会も多い筈だ。

そのような場合ライブラリに毎回インポートすると、インポートされたSVGアイコンは都度別ファイルとして管理されるため、ライブラリにまったく同じ見た目のアイコンが増えていくことになる。

しかしProject機能を使えば、一つのアイコンを別のProjectに追加することが可能なため、ライブラリ内で同じ見た目のアイコンが重複していってしまうことを防ぐことができるわけだ。

継続性のある美しいアイコン管理手法としては

  • 新規の案件が始まった際に「Project」を作成し

  • ロゴなど案件独自のオリジナルのアイコンは迷うことなくライブラリへインポートし、それをProjectに追加

  • 過去の案件で使ったアイコンの中から再利用したいものがあれば、既にライブラリ内にある該当のアイコンを選択して、Projectへ追加

というように扱えば良いように思う。


高速な検索性能

また、インポートした全てのアイコンを検索窓から検索することが可能で、ファイル名に含まれるテキストが対象となるほか、Setやグループを指定すれば、そのなかに含まれるもののみを対象とすることも出来る。

検索の反応も極めてよく、結果がサクサクと現れる点も心地よい。

インポート直後に各アイコンが持っているメタデータはファイル名のみだが、手動で任意のテキスト情報を入力することで、より検索しやすく育てることも可能になっている。

また、フィルタ機能も付いておりSVGアイコンの種類（Fill・Stroke・Color）やSVGファイルのオリジナルのグリッドサイズを指定した絞り込み検索も可能で非常に使いやすい。


至れり尽くせりのエクスポート機能

エクスポートしたいアイコンがあれば、ドラックして目的のアプリウィンドウ上でドロップすれば良い。Figma・XD・Photoshop・IllustratorなどSVGをサポートするアプリには大抵可能と思われる。

そのほか、アイコン上で右クリックすれば、コンテキストメニューから SVG code / JSX code / VUE code / data URI など指定したデータ形式をクリップボードに送ることも可能。

例として以下は data URI として書き出したものだ。CSS の background-image として出力される。

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='279' height='100' viewBox='0 0 279.7 100'%3E%3Cg fill='%23F7F7F7'%3E%3Cpath d='M20.3 71v28.5h-3.4V71H0v-2.7h37.2V71H20.3z'%3E%3C/path%3E%3Cpath d='M76.1 84c0 9.4-8.5 16-20 16s-20-6.6-20-16 8.5-16 20-16 20 6.5 20 16zm-36.6 0c0 7.9 6.9 13.3 16.6 13.3 9.7 0 16.6-5.4 16.6-13.3s-6.9-13.3-16.6-13.3c-9.7 0-16.6 5.4-16.6 13.3z'%3E%3C/path%3E%3Cpath d='M84.3 86l24.9-17.6h5L94.8 81.9l21 17.7h-4.6l-18.9-16-8 5.6v10.4h-3.4V68.4h3.4V86z'%3E%3C/path%3E%3Cpath d='M151.8 68.4h4.2L137.5 86v13.6h-3.4V86l-18.4-17.6h4.3l15.9 15.2 15.9-15.2z'%3E%3C/path%3E%3Cpath d='M193 84c0 9.4-8.5 16-20 16s-20-6.6-20-16 8.5-16 20-16 20 6.5 20 16zm-36.5 0c0 7.9 6.9 13.3 16.6 13.3 9.7 0 16.6-5.4 16.6-13.3s-6.9-13.3-16.6-13.3c-9.7 0-16.6 5.4-16.6 13.3z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M0 .9h32.3c22.4 0 36.1 10.8 36.1 27.6S54.7 56.2 32.3 56.2H0V.9zm32.3 42.6c12.4 0 19.4-5.9 19.4-14.9 0-9.1-7-14.9-19.5-14.9H16.4v29.9h15.9z'%3E%3C/path%3E%3Cpath d='M88.6 56.2H71.9V.9h39.7c15 0 24.8 6.6 24.8 18.5 0 8.2-5.1 14.2-13.5 16.8l14.9 19.9h-19.2l-13.2-18.3H88.6v18.4zm22.1-30.3c5.9 0 9.1-2.5 9.1-6.2 0-3.9-3.2-6.2-9.1-6.2H88.6v12.4h22.1z'%3E%3C/path%3E%3Cpath d='M212.3 28.5c0 16.5-15.4 28.5-36.8 28.5-21.5 0-36.9-12.1-36.9-28.5S154 0 175.5 0s36.8 12.1 36.8 28.5zm-56.5 0c0 9.5 8.5 15.5 19.7 15.5 11.3 0 19.7-6 19.7-15.5S186.7 13 175.5 13c-11.3.1-19.7 6.1-19.7 15.5z'%3E%3C/path%3E%3Cpath d='M232.6 56.2h-16.8V.9h39.1c15 0 24.8 6.5 24.8 18.8s-9.8 18.8-24.8 18.8h-22.3v17.7zM254 26c6 0 9.2-2.4 9.2-6.2 0-3.9-3.2-6.2-9.2-6.2h-21.4V26H254z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");


その場で色の変更が可能

アプリの利用環境がライトモードかダークモードかによって結果は変わるのだが、エクスポート時に「ダークモード」でアプリを利用している場合、デフォルトではアイコンは fill: #F7F7F7 で出力される。

ダークモードのNucleo.appからエクスポートした直後。デフォルトでは #F7F7F7 の塗りで出力された。

出力された後にエクスポート先のアプリで色を変更すれば良い話ではあるが、あらかじめNecleo.appのCustomizationペインで色指定をすることで、その色で出力することができる。これは一時的な変更であり、オリジナルのSVGファイルに変更が加わってしまうことはない。

Colorに指定した #000000 でエクスポートされた。


アイコンにフレームをつけることも可能

さらに素晴らしいのは、色・半径・サイズを指定して一時的な「フレーム」を備えたアイコンを出力できる点だ。

これを利用すると、ライブラリのアイコンに「円形」のフレームをつけたボタンアイコンを一気に生成してエクスポートすることができてしまう。デザイン時におけるバリエーションを作成する際に大活躍する機能なのではないだろうか。

Figmaに一気に出力した例


うそだろ… webfontのエクスポートまでできてしまう

さらにアプリを見渡していて、驚愕してしまったのがこの機能。選択したアイコンをまとめたwebfontを生成できてしまう。

Icon Fontエクスポートをすると、woff / ttf / eot などwebfontとして扱えるアイコンファイルを生成してくれるほか、

webfontを表示したデモページ (html) のほか、コーディング時に利用する CSS / SCSS / LESS に至るまで出力できてしまう。まさに至れり尽くせりだ。

/*--------------------------------

Nucleo icon font
Generated using nucleoapp.com

-------------------------------- */

@font-face {
  font-family: 'Nucleo';
  src: url('../fonts/Nucleo.eot');
  src: url('../fonts/Nucleo.eot') format('embedded-opentype'),
       url('../fonts/Nucleo.woff2') format('woff2'),
       url('../fonts/Nucleo.woff') format('woff'),
       url('../fonts/Nucleo.ttf') format('truetype'),
       url('../fonts/Nucleo.svg') format('svg');
}

/* base class */
.c-icon {
  display: inline-block;
  font: normal normal normal 1em/1 'Nucleo';
  color: inherit;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

〜中略〜

/* icons */
.c-icon--bracket_b::before {
  content: "\ea01";
}

.c-icon--bracket_bold_l::before {
  content: "\ea02";
}

〜中略〜

これまで。アイコンをwebfont化するには自分はIcoMoonの利用一辺倒だったが、その作業が今後Nucleo.app内で完結してしまうかもしれない。

唯一ligature（合字）の設定方法が分からなかったのだが、エクスポートのメニュー内に設定があるということは、何らかの手間を加えれば出来そうでもある。ここは追調査が必要そうだ。

設定について

SVGO最適化

ここは好みによるが、個人的には「インポート時にSVGOで最適化」するオプションはオフにしておいた方が良いように思う。SVGOで最適化することでSVGファイルの容量が削減されるのは良いことだが、

  • 最適化時にSVGファイル内のコードが改変される可能性がある（ポイントを示す小数点の丸めなど）

  • 最適化されたSVGファイルがIllustratorでは編集できなくなってしまう場合がある

という懸念があるためだ。

クラウドストレージにライブラリを置く際の注意

Dropboxなどクラウドストレージにライブラリを設置することは可能だが、

  • 他のユーザーとライブラリをシェアしないこと

  • 同時に複数のデバイスから利用しないこと

が注意点として強く挙げられていた。

要は複数箇所からアクセスがあった場合、データベース（sqlite）の整合性が保てなくなり壊れてしまう可能性があるということだ。バックアップ目的にクラウドに設置すること自体は問題ないので、その点は利用時に気に留めておきたい。

　• • •

機能性の高さのあまりいろいろと驚いてしまっているが、最も驚きなのはNucleo.appが無償提供であること。

試用後に満足し、継続利用をしていきたい気持ちがあるのであれば「Nucleoアイコンを購入すること」が何よりの支援になると思うのでぜひとも検討していきたいところ。


読んでいただきありがとうございます。丁寧な記事作りをこころがけていますので、記事が気に入ったなどでカンパをよせていただけるのなら励みになります。