登録されてないSVGアイコンを使いたい時のやり方です

WordPressテーマ「SWELL」や「Arkhe」は人気の高いテーマです。このポートフォリオサイトでも「SWELL」を使用しています。

今回は、「SWELL」や「Arkhe」のテーマに未登録のSVGアイコンを登録する手順を初心者にもわかりやすく解説します。

登録済みのアイコンの使い方

「SWELL」や「Arkhe」のテーマでは、投稿記事中に「ブロックツールバー」上の笑顔アイコンからあらかじめ登録されたアイコンを呼び出せます。この機能、とても便利です！

よく使うSNSアイコン

SNSアイコンを挿入したい時、下記のようなfacebook,Instagram,YouTubeなどのアイコンはあらかじめ登録されています。

なぜSVGアイコンを登録するの？

登録されていないアイコンを使用したい時、自分でSVGコードを入力して登録することができます。例えば、「Arkhe」にはX（旧Twitter）のアイコンの登録がありません。その場合、SVGタグを登録すれば使用することができます。

SVGアイコンを使う方法

STEP

Xの公式ブランドページから、svgコードをダウンロードします。

 Xブランドツールキットのページ

STEP

ダウンロードして解凍したフォルダの中の「logo.svg」をお使いのコードエディタで開いて、コピーしておきます。

STEP

svgコードを貼り付ける

<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>

このコードを「ブロックツールバー」の笑顔アイコンから表示されるポップアップ「アイコンを選択」画面の下部に貼り付けます（赤枠）。貼り付けたら「決定」ボタンを押します。

STEP

Xのアイコンが表示されました！

 

注意点

• SVGのコードは信頼できるソースから取得しましょう（セキュリティ上の理由）。
• 複雑なSVGはコードが長くなるので、必要に応じて整形・圧縮を。

まとめ

「Arkhe」や「SWELL」テーマでオリジナルSVGアイコンを登録して使う方法をご紹介しました。登録されてないご希望のアイコンで、ぜひ試してみてください！