Vue.use() options

[davestewart]

Would be good to be able to set defaults:

Vue.use(unicons, {
  width: 20,
  height: 20,
  fill: '#FF0000',
})

[davestewart]

Additionally, you could consider something like this to reduce duplication / potential errors in choosing and adding icons:

// icons.js
export {
  uniCheck,
  uniCheckCircle,
  uniExclamationCircle,
  uniTimes,
  uniTimesCircle
} from 'vue-unicons/src/icons'

// plugin.js
import Unicon from 'vue-unicons'
import * as icons from './icons'

Vue.use(Unicon, {
  width: 20,
  height: 20,
  fill: '#FF0000',
  icons,
})

This would be backwards compatible with Unicon.add()

[hmaesta]

I support this ideia.

Btw, would be awesome to define fill: 'currentColor' as default

[davestewart]

Funny you should mention that!

I've just written this which doesn't require any setup or imports, camel-casing or prefixes, and will work with any SVG icons.

Prerequisites:

• run npm install raw-loader --save-dev
• edit the path a folder of SVG assets (works with webpack aliases)

<script>
export default {
  functional: true,

  props: {
    icon: {
      type: String,
      required: true
    },

    size: {
      type: [Number, String],
      default: 24
    },

    color: {
      type: String,
      default: 'currentColor'
    }
  },

  render (h, context) {
    // input
    const { props, data, listeners } = context
    const { icon, size, color } = props

    // svg
    const svg = require(`!raw-loader!assets/icons/${icon}.svg`).default
    const html = svg
      .replace(/fill="#.+?"/g, `fill="${color}"`)
      .replace(/<svg.+?>|<\/svg>/g, '')

    // options
    // TODO parse attributes from original SVG
    const attrs = {
      xmlns: 'http://www.w3.org/2000/svg',
      width: size,
      height: size,
      viewBox: '0 0 24 24',
      class: 'uiIcon',
      'aria-hidden': true,
    }

    const domProps = {
      innerHTML: html
    }

    // shape
    return h('svg', { ...data, attrs, domProps, listeners })
  }
}
</script>

<style>
.uiIcon {
  pointer-events: bounding-box;
}
</style>

<UiIcon icon="blah" />

[antonreshetov]

Closed because it was added in #37