レイアウトモードのエレメントセットに指定可能なアイコンを追加する方法

2025 Spring にて、エレメントセットのカテゴリ「ユーザ部品」に追加するエレメントセットにアイコンを指定できるようになりました。

標準のアイコンでまかなえない場合、アイコンを追加する必要がありますが、標準の方法として提供できていません。暫定的ではありますが、アイコンの追加方法を説明します。

追加可能なアイコンのフォーマット

SVG のみ追加可能です。
将来的には、PNG などの画像ファイル、アイコンフォントによるアイコンの追加を検討しています。

表示する SVG の仕様

• 白と黒の2色で構成されていること
  • 色彩豊かなアイコンではなく、線画として成り立つものであること
• width, height それぞれ 40 であること
• アイコンを構成する色は style="fill: #fff!important" が指定されていること
• stroke が指定されている場合、#888 が指定されていること

SVG の作成方法

SVG アイコン配布サイトのアイコンを利用する

商用利用可能な、フリーの SVG アイコンを提供しているサイトがあります。
これらのサイトからアイコンをダウンロードし、利用することが可能です。
各サイトによって、利用条件がことなりますので、ご確認のうえ利用してください。

今回は下記のサイトのアイコンを利用することとします。なお、このサイトのアイコンは 2025-03-26 現在 MIT ライセンスで利用可能です。

Atlas Icons

Open source free icons library, available in variable stroke SVG format, web font, Figma, React, Vue and Flutter ready to use packages

http://atlasicons.vectopus.com

説明のため、シンプルなアイコンとして line-segment を例に挙げます。
なお、アイコン自体のアップデートにより下記の説明と異なる場合があることをご了承ください。

対象のアイコンのダウンロードを行うと、line-segment.svg をダウンロードすることができます。
テキストエディタで開くと以下のような XML を確認できます。読みやすさのためフォーマットしています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000">
  <defs>
    <style>.cls-637b8d40f95e86b59c57a2e8-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style>
  </defs>
  <g id="roll_brush" data-name="roll brush">
    <line class="cls-637b8d40f95e86b59c57a2e8-1" x1="22.54" y1="1.45" x2="1.44" y2="22.55"></line>
  </g>
</svg>

表示する SVG の仕様を満たすように変更していきます。

• widht, height の値を 40 に置き換える
• fill の値を #fff!important に置き換える
• stroke が指定されているので currentColor を#888 に置き換える

修正後の XML は以下の通りです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="40" height="40" color="#000000">
  <defs>
    <style>.cls-637b8d40f95e86b59c57a2e8-1{fill:#fff!important;stroke:#888;stroke-miterlimit:10;}</style>
  </defs>
  <g id="roll_brush" data-name="roll brush">
    <line class="cls-637b8d40f95e86b59c57a2e8-1" x1="22.54" y1="1.45" x2="1.44" y2="22.55"></line>
  </g>
</svg>

Adobe Illustrator を使用する

標準のアイコンは Adobe Illustrator を使用して作成しています。所有されている方は、Illustrator を利用して作成してください。

アイコンの画像を作成したら、全てアウトライン化します。
出力の設定は以下の通りです。

• アートボードを 40x40 で作成する
• SVG で出力する

なお、出力された SVG に id 属性が含まれる場合があります。
画面の HTML と重複する可能性があるので、id 属性は削除することをお勧めします。

SVG アイコンの追加

作成した SVG アイコンを追加します。まだアイコンの追加方法を提供していないので、データベースに直接登録します。

対象のテーブル名は imbm_eset_icon です。TableMaintenance を利用すると、比較的簡単に追加することができます。

以下のように入力、選択し、新規登録ボタンをクリックします。
作成者 〜 更新日は適宜入力、選択してください。

• アイコンID（PK）
  • line-segment
• アイコンタイプ
  • svg
• アイコン情報
  • 作成、修正した svg ファイルを選択してください

確認

IM-BloomMaker のエレメントセット一覧にアクセスし「ユーザ部品（レイアウトモード）」カテゴリを選択、「エレメントセット新規作成」リンクをクリックしてください。
右側の「コンテンツ種別」で Bulma または Bulma Theme Colored を選択すると「パレット表示」「パレットアイコン」が表示されます。

パレットアイコンの「選択」リンクをクリックすると、アイコン一覧ダイアログが表示され、追加したアイコンが存在することを確認できます。

選択したアイコンは「パレット表示」で選択した箇所で利用されます。