g-icon

A Vue.js plugin/component to help you manage your icons seamlessly

warning BREAKING CHANGE as for 1.1.0+: default width & height for the svg element is 1em instead of 24.

Installation

npm install v-gicon or yarn add v-gicon

Directly include it in html:

<!-- Browsers with ES module support load this file. -->
<script type="module" src="node_modules/v-gicon/dist/g-icon.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know when *not* to load this file). -->
<script nomodule src="node_modules/v-gicon/dist/g-icon-legacy.js"></script>

Usage

  • Install the plugin:

    // Declare your icons
import GIcon from 'v-gicon' // or use `window.GIcon` in browsers

// Here I use the svg-inline-loader for webpack to load contents of svg files
// but you could any method that suits you
// This will call `Vue.component('g-icon', GIcon)` internally
Vue.use(GIcon, {
  'arrow-left': require('!svg-inline-loader!@/assets/icons/arrow-left.svg'),
  'arrow-right': [require('!svg-inline-loader!@/assets/icons/arrow-right.svg'), {...defaultSvgAttributes...}],
  // You can pass a `keepAttrs` key to keep attributes from the original svg tag.
  // The value can be either `true` to keep all attributes, or an array of keys to be kept.
  ...
})

// Or just call at some point
GIcon.setIcons({ ...your icons... })

  • Then use g-icon in your components:

    <!-- the g-icon component will render as `<i class="g-icon" v-html="icon content"></i>` -->

<!-- call with icon name -->
<g-icon name="icon-name" :options="{...}"/>

<!-- or with raw svg string -->
<g-icon rawSvg="svg contents here" :options="{...}"/>

<!-- or if you use font-awesome for example you can just pass classes down to g-icon -->
<g-icon :class="fa-icon-name fa-..." />

<!-- Since v1.1.0 you can control sizes with more ease.
box-size & font-size will set the width, the height and the font-size of the <i>.
See also options section below. -->
<g-icon name="icon-name" box-size="2em" font-size="2em" />

    If you didn't install the plugin with Vue.use you'll have to declare the GIcon component first:

    import GIcon from 'v-gicon'

{
  ...
  components: {
    GIcon
  },
  ...
}

Options

The options props of g-icon is an object containing attributes that will be merged to default attributes and passed to the root svg element of icons. The defaults attributes are the following:

{
  "xmlns": "http://www.w3.org/2000/svg",
  "width": "1em",
  "height": "1em",
  "viewBox": "0 0 24 24",
  "fill": "none",
  "stroke": "currentColor",
  "stroke-width": 2,
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}

Example

  1. git clone the repo
  2. run cd g-icon/test && npm run dev and it will open your browser at localhost:8080
  3. See the result

GitHub