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

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