Vueで<trash-can />,<arrow />のようなコンポーネントをファクトリー関数を使って定義したい

Question

前提・実現したいこと

Vueの初学者です。初歩的な質問で申し訳ないですが、よろしくお願いします。
現在アイコンのコンポーネントを以下のように使っております。

<icon icon-name="trash-can"/> <icon icon-name="arrow">

これを

<trash-can /> <arrow />

のように変更したいのですが、アイコンが膨大でコンポーネントの数だけvueファイルを作りたくはないのです。１つのicon.vueコンポーネントから他のコンポーネントを作りたいですがやり方が分かりません。

現在iconコンポーネントの中身は以下のようにimgタグのsrc属性を変えてるだけです。

icon.vueファイル

<template>
  <img :src="iconImage">
</template>

<script>
export default {
  data(){
    return {
      iconImage: require(`~/app/assets/icons/${this.iconName}.svg`)
    }
  },
  props: {
    iconName: {
      type : String,
      required: true,
    },
  }
}

</script>

次は実現したいコンポーネントを使う側のコードです。最終的にこのような感じで記述できないかと思ってます。

<template>
 <div>
  <trash-can-icon />
  <arrow-icon />
 </div>
</template>
<script>
import { TrashCanIcon, ArrowIcon } from 'path/to/iconFactory.js'

export default {
  component: { TrashCanIcon, ArrowIcon }
}
</script>

iconFactory.jsの内容

export const TrashCanIcon = iconFactory('trash-can')
export const ArrowIcon = iconFactory('arrow')

しかしここでiconFactoryをどのように実装すれば良いのか分からず途方にくれております。
上記の実現方法について何かしらアドバイスやヒントを頂けないでしょうか。

どうかよろしくお願い致します。

Answer 1

propで実現するほうが個人的には一般的でスマートだと思いますが、一応以下の方法で実現は可能でした。

<template>
  <div>
    <trash-can />
  </div>
</template>

<script>
const iconFactory  = name => {
  return {
    name,
    template: `<img src="/app/assets/icons/${name}.svg">`
  }
}

export default {
  components: {
    trashCan: iconFactory('trash-can')
  }
}
</script>

このままではエラーが出るのでnuxt.config.jsからwebpackのconfigにエイリアスを追加してください

  build: {
    extend (config, ctx) {
      config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
    }
  }

エラーの詳細はこちら
Rails5.1でVue.jsで単一ファイルコンポーネントのエラーがでる - qiita

Comments

[Arima9111]

ありがとうございました！
おかげさまでコードを重複することなく、iconFactory関数に渡すアイコン名を変えるだけで個別のアイコンコンポーネントを作成することができるようになりました。

本当に感謝ですm(_ _)m
※　後、最初に書いたpropの方が一般的だと言うことも覚えておきます！