Vueと共通

【Nuxt.js】Nuxt番外編:SVGのコンポーネント化でスッキリ管理

前置き

今回は画像フォーマットSVGを
コンポーネントにして
使う方法を解説します🙋‍♀️

⬇️これらに触れながら進めます✨🏃‍♀️

  • そもそもSVGとは何か
  • SVGを使うメリット
  • コンポーネントにするメリット

SVGとは

画像フォーマットの1つです🌟📸
jpeg, pngとかgifとかのアレです。
これらを使う場合は基本的に
imgタグを使います。

ただしSVGの場合は
svgタグを使うことが多いです。
次のメリットで説明します💁‍♀️✈️


pngよりSVGを使うメリットについては
ここが参考になります。
https://ss-complex.com/svg01/

時と場合によりますが、
基本はSVGが良いです❗️
簡単に言うと、
容量が軽い、
cssで調整がいくらでも効く、

といった感じです❤️


SVGを使うメリット

同じアイコンだけど色だけ変えたい!
なんて時に便利です💕

CSSプロパティのfill
色だけ変えれば良いので
jpegなどを色別に複数個
保存する必要がなくなります💡

fillimgタグでは使えないので
SVGタグを使用します💫

(一応imgタグでも表示はできます。)


⬇️同じアイコン(画像右端の下矢印)で
 白と緑に色を変えたい時に便利❣️


SVGコンポーネントを使うメリット

使わない場合との比較を見ましょう✨👀

比較: 使わない場合

staticの配下に直接svgを入れます。

directory

static/
--| arrow-down.svg
--| arrow-up.svg
--| arror-right.svg


比較: 使った場合

コンポーネント内に
全てのアイコンが一覧で見えるので
管理がしやすいかと思います💡

static開けば見れるじゃん!
という意見もありそうですが🤔💭

SVGだとテキストデータなので
図形が見れなくて
コードだけの表示…😯💦
このコードはこのアイコン❗️
とパッと見て分かりやすい
と思ってます🍒😀

コメントアウトでsvgタグの上に
何のアイコンか入れておくだけでも
見やすくなりますね✨👀

directory

components/
--| Svgs.vue


使い方

アイコンの用意はないけど
手取り早くやってみたい❗️
という方はこちらで選びましょう🌟
https://iconmonstr.com/

Svgs.vueにアイコンを登録

初期状態

svgタグには全てsvgクラスをつけるので、
cssでサイズ調整をするようにしておきます。

登録

svgタグにclass名などを追加し、
symbolタグを入れ子にします。

symbolタグの中に
元々のsvgコードにある入れ子
pathタグなどを追加します。
そしてpathの後ろにあるfill
消しておきましょう🧹
(もしくはstroke)
あとからCSSでfillを指定しても
ここに残っていると
反映されないことがあります⚠️

1色の場合はこれでOK🙆‍♀️

2色以上ある場合は、
それぞれの色をgタグでグループ化します🍀
コードが分かれば良いので
中のpathは適当です!


layoutに入れ込む

ついでですが、
わざわざimportするのは面倒なので
自動importも見ていただけると
良いかと思います👀
06: 自動でインポートする


使用箇所にsvgタグで表示

いよいよです❗️
svgタグで表示させましょう😄

svgタグ, useタグを使用します🌟
useタグのclassは
コンポーネントに登録した
symbolのid名です🍒
xlinkはそのidの頭に
#をつければいいだけです💡


まとめ

CSSで調整の効くSVG
似たような図形を保存する手間もないし、
コンポーネントにできれば
簡単に管理できて作業効率もUPしますね❤️🤗

-Vueと共通
-,

© 2020 aLiz Nuxt