【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などを色別に複数個
保存する必要がなくなります💡

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

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

<img src="/imgs/arw-down.svg" alt="">

1	<img src="/imgs/arw-down.svg" alt="">

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

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

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

比較: 使わない場合

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

比較: 使った場合

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

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

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

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

directory

components/
--| Svgs.vue

<template>
  <div class="svgs">
    <!-- #arrow-down -->
    <svg
      class="svg"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <symbol
        id="arrow-down"
        viewBox="0 0 23 23"
      >
        <path d="M4.01281 7.42469C3.42702 6.8389 2.47727 6.8389 1.89149 7.42469C1.3057 8.01048 1.3057 8.96023 1.89149 9.54601L10.3768 18.0313C10.9626 18.6171 11.9123 18.6171 12.4981 18.0313L20.9834 9.54601C21.5692 8.96023 21.5692 8.01048 20.9834 7.42469C20.3976 6.83891 19.4478 6.83891 18.8621 7.42469L11.4374 14.8493L4.01281 7.42469Z" />
      </symbol>
    </svg>

    <!-- #arrow-right -->
    <svg
      class="svg"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <symbol
        id="arrow-right"
        viewBox="0 0 8 9"
      >
        <path d="M3.89596 0.607459L7.78505 4.49655L3.88909 8.39251L3.18198 7.6854L6.37083 4.49655L3.18885 1.31457L3.89596 0.607459Z" />
      </symbol>
    </svg>
  </div>
</template>

<script>
export default {
}
</script>


<style lang="scss" scoped>
  .svgs {
    > .svg {
      position: absolute;
      width: 0;
      height: 0;
    }
  }
</style>

<svg

class="svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

<symbol

id="arrow-down"

viewBox="0 0 23 23"

</symbol>

</svg>

<svg

class="svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

<symbol

id="arrow-right"

viewBox="0 0 8 9"

</symbol>

</svg>

</div>

</template>

export default {

}

</script>

.svgs {

> .svg {

position: absolute;

width: 0;

height: 0;

}

</style>

使い方

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

Svgs.vueにアイコンを登録

初期状態

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

<template>
  <div class="svgs">
  </div>
</template>

<script>
export default {
}
</script>


<style lang="scss" scoped>
  .svgs {
    > .svg {
      position: absolute;
      width: 0;
      height: 0;
    }
  }
</style>

</div>

</template>

export default {

}

</script>

.svgs {

> .svg {

position: absolute;

width: 0;

height: 0;

}

</style>

登録

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

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

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

<template>
  <div class="svgs">
    <!-- #arrow-down -->
    <svg
      class="svg"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <symbol
        id="arrow-down"
        viewBox="0 0 23 23"
      >
        <path d="M4.01281 7.42469C3.42702 6.8389 2.47727 6.8389 1.89149 7.42469C1.3057 8.01048 1.3057 8.96023 1.89149 9.54601L10.3768 18.0313C10.9626 18.6171 11.9123 18.6171 12.4981 18.0313L20.9834 9.54601C21.5692 8.96023 21.5692 8.01048 20.9834 7.42469C20.3976 6.83891 19.4478 6.83891 18.8621 7.42469L11.4374 14.8493L4.01281 7.42469Z" />
      </symbol>
    </svg>
  </div>
</template>

<script>
export default {
}
</script>


<style lang="scss" scoped>
  .svgs {
    > .svg {
      position: absolute;
      width: 0;
      height: 0;
    }
  }
</style>

<svg

class="svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

<symbol

id="arrow-down"

viewBox="0 0 23 23"

</symbol>

</svg>

</div>

</template>

export default {

}

</script>

.svgs {

> .svg {

position: absolute;

width: 0;

height: 0;

}

</style>

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

<template>
  <div class="svgs">
    <!-- #arrow-down -->
    <svg
      class="svg"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <symbol
        id="arrow-down"
        viewBox="0 0 23 23"
      >
        <g id="arrow-down">
          <path d="M4.01281 7.42469C3.42702 6.8389 2.47727 6.8389 1.89149 7.42469C1.3057 8.01048 1.3057 8.96023 1.89149 9.54601L10.3768 18.0313C10.9626 18.6171 11.9123 18.6171 12.4981 18.0313L20.9834 9.54601C21.5692 8.96023 21.5692 8.01048 20.9834 7.42469C20.3976 6.83891 19.4478 6.83891 18.8621 7.42469L11.4374 14.8493L4.01281 7.42469Z" />
        </g>
        <g id="arrow-circle">
          <path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
        </g>
      </symbol>
    </svg>
  </div>
</template>

<svg

class="svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

<symbol

id="arrow-down"

viewBox="0 0 23 23"

</g>

</g>

</symbol>

</svg>

</div>

</template>

layoutに入れ込む

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

<template>
  <div>
    <Svgs />
    <nuxt />
  </div>
</template>

// 自動インポートの場合は記述不要
<script>
import Svgs from '~/components/Svgs.vue'

export default {
  components: {
    Svgs
  }
}
</script>

<div>

</div>

</template>

// 自動インポートの場合は記述不要

import Svgs from '~/components/Svgs.vue'

export default {

components: {

Svgs

}

</script>

使用箇所にsvgタグで表示

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

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

<template>
  <div class="page">
    <svg
      class="arw-down"
      viewBox="0 0 23 23"
    >
      <use xlink:href="#arrow-down" />
    </svg>
  </div>
</template>

<svg

class="arw-down"

viewBox="0 0 23 23"

</svg>

</div>

</template>

まとめ

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