how can I create one icon file for my whole app? Currently I import into every *.vue file the icons and declare them afterwards like you can see in the following example.
<template>
<div>
<v-icon>
{{mdiCheck}}
</v-icon>
</div>
</template>
<script>
import {
mdiClose,
mdiCheck
} from '@mdi/js'
export default {
data: () => ({
mdiClose: mdiClose,
mdiCheck: mdiCheck
}),
</script>
I use Nuxt. I want to define the icons in one central file and use them in all my project without importing and declaring the icons in every single file. How can I do that?
I would recommend creating a separate component:
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
}
}
}
Than make the component global by creating a plugin
plugins/global-components.js
import Vue from 'vue'
import Icon from '../components/icon.vue'
Vue.component('icon', Icon)
Finally register the plugin in nuxt.config.js
export default {
...
plugins: [
{ src: '~/plugins/global-components.js' }
]
}
Now, you can use this component everywhere like this:
template>
<div>
<icon name="mdiCheck" />
</div>
</template>
<script>
export default {
data: () => ({})
}
</script>