Vue で SVG の色、サイズを指定できる Icon Component

Inline SVG は動的に色、カラーが指定できる

SVG は Inline で HTML で挿入できて、後から動的に色、カラーが指定できます。
これはものすごく便利です。

SVG は Vue Component のように読み込める

Webpack plugin vue-svg-loader を使うと、import するだけ SVG 画像を コンポーネントとして表示することができるようになります。

vue-cli だと下記コマンドだけで svg 画像が import できるようにります。

vue add svg

こんな感じです。

<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
</template>
<script>
import VueLogo from './public/vue.svg';
export default {
  name: 'Example',
  components: {
    VueLogo,
  },
};
</script>

SVG を読み込んで、種類、色、サイズを指定できるコンポーネントを作る

直接 SVG 読み込んでもいいのですが、インターフェイスを共通化したコンポーネントがあった方が扱いやすいと思ったので作ってみました。

demo

書いてみたコード

• アイコンの切り替えは is を使ってます。
• サイズは親のサイズに合わせるようにしています。
• 色の指定がない場合は、親のカラーが使われます。
• SVG の中にサイズ指定があるものを使うとサイズが反映されません。ファイルを開いて削除しています。

<template>
  <div v-bind:style="{ display: 'inline-block', width: size  + 'px' }">
    <svg :is="type" :stroke='stroke' :fill='fill' />
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';

import arrowDown from '@/assets/icons/arrow-down.svg?inline';

export default Vue.extend({
  components: {
    arrowDown,
  },
  props: {
    type: {
      type: String as PropType<string>,
      required: true,
    },
    stroke: {
      type: String as PropType<string>,
      default: 'none',
    },
    fill: {
      type: String as PropType<string>,
      default: '#333',
    },
    size: {
      type: Number as PropType<number>,
      default: 48,
    },

  },
});
</script>

コード全体は https://github.com/coa00/VueSvgIcon に置いてます。