如何在vue中处理资源中的图标

<template>
  <svg class="icon" v-bind="$attrs">
    <use :xlink:href="`#icon-${name}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'
import Icon from './components/Icon.vue'

// 引入图标资源
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/)
requireAll(req)

// 注册Icon组件
Vue.component('Icon', Icon)

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div>
    <Icon name="home" />
    <Icon name="settings" />
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>