整个应用程序的一个图标文件（Vuejs，Nuxt）

Question

如何为我的整个应用创建一个图标文件？目前，我将图标导入到每个 *.vue 文件中，然后像您在以下示例中看到的那样声明它们。

<template>
  <div>
    <v-icon>
      {{mdiCheck}}
    </v-icon>
  </div>
</template>

<script>
import {
  mdiClose,
  mdiCheck
} from '@mdi/js'

export default {
    data: () => ({
        mdiClose: mdiClose,
        mdiCheck: mdiCheck
}),
</script>

我用的是Nuxt。我想在一个中央文件中定义图标并在我的所有项目中使用它们，而无需在每个文件中导入和声明图标。我该怎么做？

Answer 1

我建议创建一个单独的组件：

components/icon.vue

template>
  <div>
    <v-icon>
      {{icons[name]}}
    </v-icon>
  </div>
</template>

<script>
import {
  mdiClose,
  mdiCheck
} from '@mdi/js'

export default {
    data: () => ({
        icons: {
          mdiClose: mdiClose,
          mdiCheck: mdiCheck
        }
    }),
    props: {
      name: {
        type: String,
        required: true
      }
    }
}

然后通过创建插件使组件成为全局组件

plugins/global-components.js

import Vue from 'vue'
import Icon from '../components/icon.vue'

Vue.component('icon', Icon)

最后在nuxt.config.js

注册插件


export default {
    ...
    plugins: [
        { src: '~/plugins/global-components.js' }
    ]
}

现在，您可以像这样在任何地方使用这个组件：

template>
  <div>
    <icon name="mdiCheck" />
  </div>
</template>

<script>

export default {
  data: () => ({})
}

</script>

整个应用程序的一个图标文件（Vuejs，Nuxt）

one icon file for whole application (Vuejs, Nuxt)

javascript

vuejs2

nuxt.js