SF Symbols を FileMaker のボタンアイコンとして登録する

p388cell

SF Symbols は、Apple が開発したアイコンセットです。これは、iOS, macOS, watchOS, tvOS といった Apple のオペレーティングシステムで使われています。SF は San Francisco の略で、これは Apple が開発したサンフランシスコフォントに由来します。

SF Symbols は非常に多くのアイコンを提供しており、それぞれは異なる重さと大きさで利用できます。これにより、開発者はアプリ内で統一感のあるビジュアルデザインを維持しつつ、ユーザーインターフェースを自由にカスタマイズすることができます。

現在のバージョンは SF Symbols 4 であり、4,491個のアイコンが登録されています。次の URL でダウンロードすることができるので、ぜひダウンロードしてみてください。( 2023年05月09日現在 )

4491 個のアイコンがずらりと並んでいる。


アイコンは SVG 形式で取得することができるので、Claris FileMaker のカスタム App に取り込んでボタンアイコンとしても利用できそうだったので、試してみました。

SVG としてコピーしてデスクトップ等に貼り付けられる。


SVG 形式のファイルをデスクトップ等に貼り付けて、Visual Studio Code などで開くとその中身を確認できる。

<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 175.5-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.6486" height="23.9679">
 <g>
  <rect height="23.9679" opacity="0" width="17.6486" x="0" y="0"/>
  <path d="M3.20351 22.3433L14.4451 22.3433C16.5529 22.3433 17.6486 21.2574 17.6486 19.1719L17.6486 9.55936C17.6486 7.47382 16.5529 6.38788 14.4451 6.38788L11.7961 6.38788L11.7961 8.30115L14.3262 8.30115C15.2262 8.30115 15.7354 8.77752 15.7354 9.72635L15.7354 19.0049C15.7354 19.9537 15.2262 20.4301 14.3262 20.4301L3.31444 20.4301C2.40643 20.4301 1.91327 19.9537 1.91327 19.0049L1.91327 9.72635C1.91327 8.77752 2.40643 8.30115 3.31444 8.30115L5.87011 8.30115L5.87011 6.38788L3.20351 6.38788C1.0957 6.38788 0 7.47382 0 9.55936L0 19.1719C0 21.2574 1.0957 22.3433 3.20351 22.3433ZM8.82031 14.5615C9.31581 14.5615 9.72811 14.1502 9.72811 13.6715L9.72811 3.83026L9.65546 2.37772L10.257 3.09393L11.6324 4.5582C11.7885 4.73202 12.0066 4.82421 12.2353 4.82421C12.6744 4.82421 13.0432 4.49785 13.0432 4.04121C13.0432 3.80625 12.9482 3.63242 12.7842 3.46836L9.50448 0.311131C9.27401 0.0806636 9.0623 0 8.82031 0C8.58632 0 8.37636 0.0806636 8.13613 0.311131L4.85644 3.46836C4.69414 3.63242 4.60547 3.80625 4.60547 4.04121C4.60547 4.49785 4.9582 4.82421 5.40527 4.82421C5.62597 4.82421 5.86015 4.73202 6.0162 4.5582L7.38359 3.09393L7.99316 2.37772L7.92051 3.83026L7.92051 13.6715C7.92051 14.1502 8.3248 14.5615 8.82031 14.5615Z" fill="#000000" fill-opacity="0.85"/>
 </g>
</svg>

これを FileMaker のカスタム App に取り込んでみる。カスタム App のレイアウト上にボタンを配置して、[+] ボタンを押して。。。先ほど貼り付けた SVG 形式のファイルを選択して取り込み完了っと。。。



むむ！期待した状態にはならなかった。。。少し SVG の中身を修正する必要がありそうだ。

<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 175.5-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.6486" height="23.9679">
 <g>

  <path d="M3.20351 22.3433L14.4451 22.3433C16.5529 22.3433 17.6486 21.2574 17.6486 19.1719L17.6486 9.55936C17.6486 7.47382 16.5529 6.38788 14.4451 6.38788L11.7961 6.38788L11.7961 8.30115L14.3262 8.30115C15.2262 8.30115 15.7354 8.77752 15.7354 9.72635L15.7354 19.0049C15.7354 19.9537 15.2262 20.4301 14.3262 20.4301L3.31444 20.4301C2.40643 20.4301 1.91327 19.9537 1.91327 19.0049L1.91327 9.72635C1.91327 8.77752 2.40643 8.30115 3.31444 8.30115L5.87011 8.30115L5.87011 6.38788L3.20351 6.38788C1.0957 6.38788 0 7.47382 0 9.55936L0 19.1719C0 21.2574 1.0957 22.3433 3.20351 22.3433ZM8.82031 14.5615C9.31581 14.5615 9.72811 14.1502 9.72811 13.6715L9.72811 3.83026L9.65546 2.37772L10.257 3.09393L11.6324 4.5582C11.7885 4.73202 12.0066 4.82421 12.2353 4.82421C12.6744 4.82421 13.0432 4.49785 13.0432 4.04121C13.0432 3.80625 12.9482 3.63242 12.7842 3.46836L9.50448 0.311131C9.27401 0.0806636 9.0623 0 8.82031 0C8.58632 0 8.37636 0.0806636 8.13613 0.311131L4.85644 3.46836C4.69414 3.63242 4.60547 3.80625 4.60547 4.04121C4.60547 4.49785 4.9582 4.82421 5.40527 4.82421C5.62597 4.82421 5.86015 4.73202 6.0162 4.5582L7.38359 3.09393L7.99316 2.37772L7.92051 3.83026L7.92051 13.6715C7.92051 14.1502 8.3248 14.5615 8.82031 14.5615Z" class="fm_fill"/>
 </g>
</svg>

上記のように修正したらうまくいった。さてどこを修正したか、わかるだろうか。


<rect height="23.9679" opacity="0" width="17.6486" x="0" y="0"/>

fill="#000000" fill-opacity="0.85"

上記を取り除き、

class="fm_fill"

を追加


これで 4,491個 の高品質なアイコンを手に入れる事ができる。ほくほくして帰るのであった。

お疲れ様です。

この記事が気に入ったらサポートをしてみませんか？