Icon.vue

Nico Prat
Nico Prat
Feb 20 · 3 min read
Icon from Iconmonstr
  • Ne crée pas de requête HTTP supplémentaires
  • Optimise le code SVG
  • Conserve la flexibilité des composants Vue
  • S’adapte visuellement au contexte

module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
// Use inline SVG by default, add ?external to the URL if you want external loading
// See: https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs
svgRule
.oneOf('external')
.resourceQuery(/external/)
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]',
})
.end()
.end()
.oneOf('inline')
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo: {
// Options: https://github.com/svg/svgo/blob/master/.svgo.yml
plugins: [{ removeViewBox: false }, { prefixIds: true }, { removeXMLNS: true }]
}
})
},
}
import * as Icons from '../assets/icons'
// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
"scripts": {
"clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*"
}
<template>
<component :is="icon"/>
</template>
<Icon icon="help"/>
<Icon icon="help" class="red" width="16" height="16"/>
<style scoped>
path {
fill: currentColor;
}
</style>
export default {
...
install(Vue) {
Vue.component(this.name, this)
},
}
import Icon from '@/components/Icon.vue'
Vue.use(Icon)

Updates

  1. On peut aussi ajouter un validator pour la prop du component : commit
  2. J’ai fini par préfixer les icônes par icon- pour éviter les conflits avec les éléments HTML existants : commit, référence

nicooprat

Myself

Nico Prat

Written by

Nico Prat

Développeur & designer front-end. Freelance & fondateur de @globetrotterio

nicooprat

nicooprat

Myself