【Vue.js】サイズ・色にも対応！SVGアイコン簡単な作り方

VueでサクッとオリジナルのSVGアイコンコンポーネントを作成する方法です。
今回は以下の要件を満たすようにします。

• 色が変更できる
• 大きさが変更できる

この記事のポイント

• CSSのcurrentColorによる色変更
• CSS変数を使ったサイズ変更

#下準備

まずはIllustratorでの<svg>タグの準備について軽くまとめます。

• 管理上アイコンは一連のものを一つのAIファイルでまとめると良い
• アートボードは100px*100px(任意)
• アートボード、レイヤーともに名前をつける（レイヤー名はSVGのid属性に割り当てられます）
• svgのコードをシンプルにするために"パスのアウトライン"で面データに加工

SVGのオプションは以下のようにします。

.svgファイルをエディタで開いて<svg>タグの部分だけ使います。

##完成品

完成したアイコンコンポーネントSvgIcon.vueは以下のような内容になります。

SvgIcon.vue

<template>
<div　class="svg-icon" :style="sizeSetting">
<svg>
...
</svg>
</div>
</template>
<script>
export default {
  props: {
    size: {
      type: String,
      default: 14,
    },
  },
  computed: {
    sizeSetting() {
      if (this.size == 'responsive') {
        return { '--icon-size': '100%' };
      } else {
        return {
          '--icon-size': this.size + 'px',
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.svg-icon {
  height: var(--icon-size);
  width: var(--icon-size);
  svg {
    fill: currentColor;
    display: block;
  }
}
</style>

###解説1 色の変更

色の変更は、fill プロパティにcurrentColorを指定することで、 親要素で指定したcolorプロパティの値を引き継ぐようになっています。
この方法だと、hoverした時に色を変えたいのも簡単です。(後述)

<style lang="scss" scoped>
...
svg {
    fill: currentColor;
    display: block;
  }
...
</style>

###解説2 サイズの変更

ソース内のコメントに合わせて解説します。

[1] propsでsizeを定義しておき、呼び出し元で指定できるようにしておきます。
[2] divへスタイルのバインディングを行う
[2-1] 数値を受け取った場合はCSS変数に[値]pxを格納
[2-2] 数値指定ではなく文字列'responsive'を受け取った場合CSS変数に100%を格納※後述
[3] svg-iconクラスの高さと幅に変数を指定する

SvgIcon.vue

<template>
<div　class="svg-icon" :style="sizeSetting"> <!--[2]バインディングでcomputedのsizeSettingと紐づける -->
<svg>
...
</svg>
</div>
</template>
<script>
export default {
  props: { //[1]呼び出し元からsize属性で値を受け取れるようにする
    size: {
      type: String,
      default: 14,
    },
  },
  computed: {
    sizeSetting() {
      if (this.size == 'responsive') {　//[2-2]サイズ指定せず、設置されるDOMに応じて伸縮させたい時
        return { '--icon-size': '100%' };
      } else {
        return {
          '--icon-size': this.size + 'px',　//[2-1]受け取った数値をCSS変数に格納
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
//[3]CSS変数で高さと幅を指定
.svg-icon {　 
  height: var(--icon-size);　
  width: var(--icon-size);
  svg {
   ...
  }
}
</style>

#使用例

呼び出し元を　parent.vueとします。

Case1.
色を指定してアイコンを出したい時(以下の例は通常は#FFF,hoverで#00F)
サイズを指定しなければ14pxで表示されます。

parent.vue

<template>
...
<svg-icon class="text-color"></svg-icon>
...
</template>
<style lang="scss" scoped>
.text-color{
 color:#FFF;
  &:hover{
    color:#00F;
  }
}
</style>

Case2.
20pxの大きさでアイコンを出したい時

parent.vue

<svg-icon :size="20"></svg-icon>

Case3.
設置するDOMに応じて伸縮したい時(PC/スマホで出し分けたい時など便利)

parent.vue

<svg-icon :size="'responsive'"></svg-icon>

Case4.
小数点の値も対応しています。(''で囲って文字列で渡す必要がある点に注意)

parent.vue

<svg-icon :size="'10.5'"></svg-icon>