Блог

как я могу создать один файл значков для всего моего приложения? В настоящее время я импортирую в каждый файл * .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. Я хочу определить значки в одном центральном файле и использовать их во всем моем проекте без импорта и объявления значков в каждом отдельном файле. Как я могу это сделать?

Я бы рекомендовал создать отдельный компонент:

компоненты/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>