インラインアイコン

文章(テキスト)の流れの中に SVG アイコンを追加できる機能です

以下の 動画は、サイトエディターを開き、ナビゲーションブロック内のリンクテキストに追加しています。

「段落」ブロックや「ナビゲーション」ブロックの個別ページへのリンクなど
リッチテキストが使用できるブロックで「インラインアイコン」を選択してください
階層付きのナビゲーションにも対応
サイズ変更にも対応
開閉メニューにも対応

直接 SVG アイコンを挿入しパフォーマンス低下を防ぐ

Hakoniwa Blocks のインラインアイコンは、ウェブフォントを使用せず、SVG アイコンを採用しています。

これは、ウェブフォントは一般的には容量が重くなりがちな上、外部ファイルとして読み込むため、初回表示時に読み込み時間が発生し、ウェブサイトのパフォーマンス低下につながるからです。

インラインで SVG アイコンを追加するので、ページを表示する際に前もって読み込みをする必要がなく、さらに CSS でのカスタマイズが柔軟であるというメリットが大きいです。

使用できる SVG アイコンは約 6,000 種類!

本ページ公開時点では、高品質な SVG アイコンが約 6,000 用意されています。

キーワード検索による絞り込みにも対応

情報の視覚化やUI強化にも活用することで、ウェブサイトの表現力アップにも繋がります。ぜひ使ってみてください!

このページをシェアする

著者

imamuraのアバター