IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法

  • 公開日
  • HowTo

今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてたらいっか。』という感じで使ってきたんですよね。

でも今回、新規サイトでエラーが起き全く使えなかったので、重い腰をあげてよ〜〜〜やくきちんとSVGアイコンの使い方を把握&トラブルも解決できたので、今後トラブルに直面しないように、そして久々に使うと使い方を忘れてるので、備忘録も兼ねてメモっておこうと思います。

そんなわけで今回は『IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法!』と、『トラブルが起こる原因&解決法(対処法)』です!

SVGアイコンを準備する

まずはSVGアイコンを用意する必要があるのですが、IcoMoonには無料のものたくさんあるので、オリジナルのものが必ず必要というわけではありません。ですので、とりあえずはIcoMoonで使いたいものを選べばOKです。

IcoMoonのフリーアイコン

ですがオリジナルのアイコンを作りたい!という方もいると思いますので、その場合は「Webクリエイターズボックス」さんの「IllustratorとIcoMoonでSVGスプライトのラクラク設定!」にてイラレでのSVGアイコンの作り方等、わかりやすく丁寧に説明してくださってるので、そちらを参考にしてください!

ってことで、とりあえずここではSVGアイコンは準備できている(IcoMoonで選択済み or 作成済み)ということを前提に進めたいと思います。

あと、イラレでアイコンを作る時の注意点があるので、それは『SVGアイコンを作る時の注意点』にて。

IcoMoonでSVGスプライトのファイルを作成する

まずは準備したSVGアイコンをIcoMoonにインポートし、SVGスプライトのファイルを作っていきます。

ちなみに、このIcoMoonでSVGスプライトのファイルを作ることで、WordPressでは一つのファイルだけで色々なSVGアイコンが使えるようになります。(htmlでのサイトにはjsファイルも必要です)

1. IcoMoonにSVGファイルをインポート

IcoMoon Appのサイトにて、左上のImport Iconsのボタンをクリックして作成済みのSVGアイコンをインポートし、インポートしたアイコン(使用するアイコン)をマウスなり右上のバーガーメニューの「Select All」なりで選択し、

IcoMoonにSVGファイルをインポート

左下のGenerate SVG & Moreをクリックします。(ここではwidthを小さくしてスクリーンショットをとったので「SVG & More」になってます)

するとGenerate SVG & Moreのボタンに「Download」の文字が出てくるので、

IcoMoonで作ったSVGファイルをダウンロード

アイコンの名前や設定が大丈夫であれば、Downloadボタンをクリックしてファイルをダウンロードします。

3. SVGファイルを設置(設定)する

ダウンロードされた「icomoon」のzipファイルを展開すると、このような状態でファイルが入っているので、

icommonからダウンロードしたファイル

この「symbol-defs.svg」を、SVGスプライトを使用したいサイトのフォルダーの任意の場所に保存します。

WordPress(ワードプレス)のサイトで使用する場合

WordPressの場合はテーマ内の「images」フォルダーに「symbol-defs.svg」を保存したとして進めると、以下のような記述になります。

<body>
  <?php include_once 'images/symbol-defs.svg'; ?>

ポイントは<body>タグのすぐ下に記述する。ということですね。

WordPressはPHPなので、[include_once] での記述のみでOKなのですが、
HTMLの場合は少々異なります。

htmlのサイトで使用する場合

htmlの場合はドメイン直下の「images」フォルダーに「symbol-defs.svg」を、同じくドメイン直下の「js」フォルダに「svgxuse.js」を保存したとして進めます。

まずは「svgxuse.js」を<head>内で読み込み、

<head>
  <script src="js/svgxuse.js"></script>
</head>

「symbol-defs.svg」ファイルを

<body>
  <use xlink:href="https://xxxxx/images/symbol-defs.svg"></use>

のように、WordPressの時同様 <body>タグのすぐ下に読み込ませます。

ここでのポイントも、WordPress同様、<body>タグのすぐ下に記述する。ということですね。

実はこの設定というか記述がきちんとできていなかったため、かなりはまってしまったんです。。
ですので、この記述は忘れないようにしてくださいね!
詳細は後に『うまく表示されない時の参考に』にて。

相対パスです大丈夫!

ちなみに相対パスでも大丈夫なのですが、今回はWordPressで作っているサイト内にhtmlのページを作成する、といった、少々複雑な仕様だったので、階層がややこしくなるのでここでは絶対パスで書いてます。

4. SVGアイコンを設置(設定)する

あとはSVGアイコンを表示させたいところに、

<svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>

のように設置し、cssで装飾すればOKです!

ちなみに上記記述は、先ほどのDownloadボタンがでてきた画面の該当のアイコンの上にマウスをホーバーさせ、

svgアイコンの記述コード1

[Get Code] をクリックすると、以下のようにでてきます。

svgアイコンの記述コード2

クラスは2つ入ってますが、適宜変更して個別にcssで装飾しても大丈夫です。

以上がきちんと設置、設定できれば、以下のようにSVGアイコンが表示されてくれます。

ちなみにこのFacebookのアイコンには、styleで直接書いているのですが、あえて色に「color」を使ってます。

fillとcolorについて

以前?というか本当はsvgアイコンのカラーは「fill」を使わないとダメなはずなのですが、最近?いつの頃からか「color」でも反応してくれる?のかな?それとも、IcoMoonで作ったから、colorが使えるようになってるのかな?

その辺まだよくわかってないのでここでは敢えて「color」を使っているのですが、いつまた変更があるかわからないので、正式な「fill」を使ってくださいね!

SNSアイコンについて

ここではFacebookのアイコンを使ってますが、使用には企業にガイドラインに従って使用しないといけませんので、SNSアイコンを使用する際は『SNS等の公式ロゴ(アイコン)素材のまとめ』などを参考に、しっかりチェックして運用してくださいね!

注意点

SVGアイコンを作る時の注意点

SVGアイコンをIllustratorで作る時、なぜか書き出す時にうまくいかないことが多いのですが、ここでは作る時に注意しておいた方がいいかな。と思ったことがあったので、それをメモしておきたいと思います。

SVGアイコンには以下のように情報が記述されて表示されていて、それを図形情報に変換して表示されてます。

SVGアイコンのコード

無料のアイコンなど、単純なSVGアイコンだとこのように短い記述になるのですが、オリジナルで作ったアイコンなんかは、少々複雑にしすぎるとこんな感じにイラレ内のレイヤー情報もでてきてしまいます。

IcoMoonででてきたSVGアイコンのコード1

あと、カラーを何色も使っていると、それが上記の<path>のタグにあるように、

<path fill="#221714" style="fill: var(--color1, #221714)" d="......"></path>

カラー情報が入ってしまい、IcoMoonに入れた時にどういう法則かわからないのですが、あるカラーだけ色がついて表示されたりしたんですよね。

ですので複雑なSVGアイコンだと情報が多くなるので、なるべく単純な作りにした方がいいと思います。

ちなみに、上のアイコンの色を黒の一色#000000で作り、保存し直すと、

IcoMoonででてきたSVGアイコンのコード2

こんな感じにだいぶ記述が減りました。

ですのでアイコンを作る際は、真っ黒の一色#000000で作る!ということを頭に入れておいてください!

SVGアイコンは60個以内に

これは以前SEOのスピードアップ対策をした時にエラー表示がでてきて知ったのですが、SVGアイコンは60個以内にした方がいい!ようです。

エラー内容はきちんと覚えてないのですが、確か「60個以内にしないとダメ!」みたいなエラーが英語ででてきてたと記憶しています。

ですのでいつも新たなSVGスプライトのアイコンファイル作る時は60個以内に。というのを気をつけて作っていたのですが、SEO対策でスピードを気にしておられる方は60個以内にして作ってください。

トラブルの対処法:うまく表示されない時はここをチェック!

今回はきちんと把握したのでもう大丈夫なのですが、はまってしまったエラー、というか失敗というか、、、
きちんと読まずに作業したのでエラーが起こった=うまく表示されなかったので、その例をいくつかあげておきます。

エラー1:最初は表示されてたのに、1日経ったら表示されなくなった!

これは今回一番はまってしまったことなのですが、WordPressを使用していない、htmlで作った新規サイトにて作業をしていた時にはまってしまった例です。

最初なかなかうまく表示されてくれなかったので、試しに上でも使用したこの画像の

IcoMoonの「Quick Usage and Sharing」の画面

「Quick Usage and Sharing」にあった<link>タグと<script>タグ、を使ったところ、すぐに問題なく表示されてくれたんです。

ですので『もうこれでいっか。表示してくれてるし。』と思ってこのタグを使うことにしたのですが、
1日ちょっと経って再度チェックしてみたところ、全く表示されなくなっていたんですよね。。

『なんで?昨日まで表示されてたやん!!』と思って色々試してみたのですが全然ダメで、ふとさっきの<link>タグと<script>タグをの下にある文字をちんと読んでみると

「Expires in 24 hours」=24時間しか使えないよ〜

って書かれてたんです。

要はここに表示されている<link>タグと<script>タグは、icommonのサーバーにサンプルで表示されるように作られたファイルなので、これを使えば問題なく表示されるけど、24時間経てば使えなくなるってことなんですね。
(ちなみにこのタグ(URL)はお金を払うと今後も使えるようになります。)

そんなわけで無料でこれからも使っていく場合は、この<link>タグと<script>タグは使わず、きちんと上記の設定で使用してくださいね!

エラー2:最初の2つのアイコンがなぜか表示されてくれない!

このエラーも先程同様、WordPressを使用していない、htmlで作った新規サイトにて起こった現象なのですが、SVGアイコンを5つ記述したのに、なぜか最初の2つのアイコンが表示されてくれなかったんです。

ですので色々試しまくっていたところ『5つのアイコンの順番を入れ替えても最初の2つは表示されない』けど、『3つ目からは表示される』という事に気づいたんです。

ということは、一つ目の前に何かが必要?と気付き、上記に書いたように

「symbol-defs.svg」ファイルを

<body>
  <use xlink:href="https://xxxxx/images/symbol-defs.svg"></use>

のように、WordPressの時同様 <body>タグのすぐ下にきちんと設置してみたところ、問題なく表示されるようになった!というわけなのですが、、、
要はきちんとSVGアイコン、そしてIcoMoonでのファイルの使い方を把握できてなかったために起こったトラブルですね。

これもここに辿り着くまでかなりはまってしまったので、同じような現象が起こった方はここ、チェックしてみてください!

最後に

今までWordPressでしかSVGアイコンを使用していなかったのですが、あまり深く把握しなくても表示されていたんですよね。ですので今回、htmlのみのページでの表示でトラブルに陥ったわけなのですが、やっぱり早く前に進みたいと、きちんと把握せずに進み続けると、トラブルに陥っちゃいますね。。

そんなわけで『急がば回れ』肝に命じてこれからもデザインしていきたいと思います。



関連記事

z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1


最近お問い合わせページにちょくちょく迷惑メールがくるようになりました。『Akismet Anti-Spam』も有効にした…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


Thumbnail_Icon_firefox_bug

Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法


Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…

記事を読む▷


WPで全ページ見れなくなった時

WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)


年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Apple 製品情報




PAGE TOP