IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法：WordPress & html での設定方法
今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてたらいっか。』という感じで使ってきたんですよね。
でも今回、新規サイトでエラーが起き全く使えなかったので、重い腰をあげてよ〜〜〜やくきちんとSVGアイコンの使い方を把握＆トラブルも解決できたので、今後トラブルに直面しないように、そして久々に使うと使い方を忘れてるので、備忘録も兼ねてメモっておこうと思います。
そんなわけで今回は『IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法！』と、『トラブルが起こる原因＆解決法（対処法）』です！
目次
SVGアイコンを準備する
まずはSVGアイコンを用意する必要があるのですが、IcoMoonには無料のものたくさんあるので、オリジナルのものが必ず必要というわけではありません。ですので、とりあえずはIcoMoonで使いたいものを選べばOKです。
ですがオリジナルのアイコンを作りたい！という方もいると思いますので、その場合は「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」なりで選択し、
左下のGenerate SVG & Moreをクリックします。（ここではwidthを小さくしてスクリーンショットをとったので「SVG & More」になってます）
するとGenerate SVG & Moreのボタンに「Download」の文字が出てくるので、
アイコンの名前や設定が大丈夫であれば、Downloadボタンをクリックしてファイルをダウンロードします。
3. SVGファイルを設置（設定）する
ダウンロードされた「icomoon」のzipファイルを展開すると、このような状態でファイルが入っているので、
この「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ボタンがでてきた画面の該当のアイコンの上にマウスをホーバーさせ、
[Get Code] をクリックすると、以下のようにでてきます。
クラスは2つ入ってますが、適宜変更して個別にcssで装飾しても大丈夫です。
以上がきちんと設置、設定できれば、以下のようにSVGアイコンが表示されてくれます。
ちなみにこのFacebookのアイコンには、styleで直接書いているのですが、あえて色に「color」を使ってます。
fillとcolorについて
以前？というか本当はsvgアイコンのカラーは「fill」を使わないとダメなはずなのですが、最近？いつの頃からか「color」でも反応してくれる？のかな？それとも、IcoMoonで作ったから、colorが使えるようになってるのかな？
その辺まだよくわかってないのでここでは敢えて「color」を使っているのですが、いつまた変更があるかわからないので、正式な「fill」を使ってくださいね！
SNSアイコンについて
ここではFacebookのアイコンを使ってますが、使用には企業にガイドラインに従って使用しないといけませんので、SNSアイコンを使用する際は『SNS等の公式ロゴ（アイコン）素材のまとめ』などを参考に、しっかりチェックして運用してくださいね！
注意点
SVGアイコンを作る時の注意点
SVGアイコンをIllustratorで作る時、なぜか書き出す時にうまくいかないことが多いのですが、ここでは作る時に注意しておいた方がいいかな。と思ったことがあったので、それをメモしておきたいと思います。
SVGアイコンには以下のように情報が記述されて表示されていて、それを図形情報に変換して表示されてます。
無料のアイコンなど、単純なSVGアイコンだとこのように短い記述になるのですが、オリジナルで作ったアイコンなんかは、少々複雑にしすぎるとこんな感じにイラレ内のレイヤー情報もでてきてしまいます。
あと、カラーを何色も使っていると、それが上記の＜path＞のタグにあるように、
<path fill="#221714" style="fill: var(--color1, #221714)" d="......"></path>
カラー情報が入ってしまい、IcoMoonに入れた時にどういう法則かわからないのですが、あるカラーだけ色がついて表示されたりしたんですよね。
ですので複雑なSVGアイコンだと情報が多くなるので、なるべく単純な作りにした方がいいと思います。
ちなみに、上のアイコンの色を黒の一色#000000で作り、保存し直すと、
こんな感じにだいぶ記述が減りました。
ですのでアイコンを作る際は、真っ黒の一色#000000で作る！ということを頭に入れておいてください！
SVGアイコンは60個以内に
これは以前SEOのスピードアップ対策をした時にエラー表示がでてきて知ったのですが、SVGアイコンは60個以内にした方がいい！ようです。
エラー内容はきちんと覚えてないのですが、確か「60個以内にしないとダメ！」みたいなエラーが英語ででてきてたと記憶しています。
ですのでいつも新たなSVGスプライトのアイコンファイル作る時は60個以内に。というのを気をつけて作っていたのですが、SEO対策でスピードを気にしておられる方は60個以内にして作ってください。
トラブルの対処法：うまく表示されない時はここをチェック！
今回はきちんと把握したのでもう大丈夫なのですが、はまってしまったエラー、というか失敗というか、、、
きちんと読まずに作業したのでエラーが起こった＝うまく表示されなかったので、その例をいくつかあげておきます。
エラー１：最初は表示されてたのに、1日経ったら表示されなくなった！
これは今回一番はまってしまったことなのですが、WordPressを使用していない、htmlで作った新規サイトにて作業をしていた時にはまってしまった例です。
最初なかなかうまく表示されてくれなかったので、試しに上でも使用したこの画像の
「Quick Usage and Sharing」にあった＜link＞タグと＜script＞タグ、を使ったところ、すぐに問題なく表示されてくれたんです。
ですので『もうこれでいっか。表示してくれてるし。』と思ってこのタグを使うことにしたのですが、
1日ちょっと経って再度チェックしてみたところ、全く表示されなくなっていたんですよね。。
『なんで？昨日まで表示されてたやん！！』と思って色々試してみたのですが全然ダメで、ふとさっきの＜link＞タグと＜script＞タグをの下にある文字をちんと読んでみると
「Expires in 24 hours」=24時間しか使えないよ〜
って書かれてたんです。
要はここに表示されている＜link＞タグと＜script＞タグは、icommonのサーバーにサンプルで表示されるように作られたファイルなので、これを使えば問題なく表示されるけど、24時間経てば使えなくなるってことなんですね。
（ちなみにこのタグ（URL）はお金を払うと今後も使えるようになります。）
そんなわけで無料でこれからも使っていく場合は、この＜link＞タグと＜script＞タグは使わず、きちんと上記の設定で使用してくださいね！
エラー２：最初の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のみのページでの表示でトラブルに陥ったわけなのですが、やっぱり早く前に進みたいと、きちんと把握せずに進み続けると、トラブルに陥っちゃいますね。。
そんなわけで『急がば回れ』肝に命じてこれからもデザインしていきたいと思います。
Google AdS
- ◀PREV
前の記事
- WordPressのlightbox系プラグイン『jQuery Colorbox』のモーダルウィンドウの競合を回避する設定方法・他
- NEXT▶
次の記事 - 【2021】FacebookやTwitter CardのOGPの設定をする！チェックツールURLも！プラグインなし
関連記事
-
『reCAPTCHA v3』を2ページ以上表示させる時の方法（問い合わせ+α・固定ページ・投稿ページetc..）
以前『reCAPTCHA v3』を問い合わせページのみ＆左側に表示させる方法：その2を書いた時は、問い合わせページにのみ…
-
URLの正規化：wwwあり、なしのドメインを統一する記述方法（エックスサーバー(XSERVER) にて）
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…
-
WordPressの記事がトップページ以外、全部見れなくなった時の対処方法（404 error）
年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…
-
onMouseOver、onMouseOutで、簡単にテキストを切り替える！
前回のonMouseOver,onMouseOutで簡単に画像を切り替える！の続き、応用編です。 実はこちらサイト…
-
Google AdSenseの広告をWordPressの投稿内に記述する方法
以前Google AdSenseの広告を自動で設定してたのですが、ある時スマホで管理サイトを見た時、やたら記事を読むのを…
