@proscom/gulp-svg-vue

@proscom/gulp-svg-vue

This is a gulp plugin which allows you to convert svg to vue components as a gulp task.

In current state this plugin is not generally intended for the general use as it relies on the couple of use-case specific assumptions.

Installation

npm install --save-dev @proscom/gulp-svg-vue

# or
yarn add --dev @proscom/gulp-svg-vue

Usage

In your gulpfile.js add this module as one of the transforms applied to your files:

const gulpSvgr = require('@proscom/gulp-svg-vue');

function buildIcons() {
  return src('src/assets/icons/**/*.svg')
    .pipe(
      gulpSvgr({
        // To aggregate icons, pass an array (see below)
        aggregate: ['size'],
        // You can pass a function to determine which
        // icon to render when no aggregation matches props.
        // Default behavior is to render the last icon
        aggregateDefault: (name, icons) => icons[icons.length - 1],
        // Creates index.jsx file containing all the icons
        createIndex: true,
        // Or pass the filename of the index file
        createIndex: 'index.ts',
        // Icon file extension can be overridden
        extension: 'vue',
        // Icon file prefix can be overridden
        // Default prefix is 'Icon'
        prefix: 'MyIcon'
      })
    )
    .pipe(dest('src/icons'));
}

module.exports.buildIcons = buildIcons;

Aggregating icons

This plugin is capable of aggregating icons together. This is useful in cases when the icon has some variability, e.g.:

/back/small.svg
/back/medium.svg
/back/large.svg

Then this plugin will aggregate all these icons together, so you can dynamically choose the right variant:

<template>
  <IconBack size="small"></IconBack>
</template>

<script>
import { IconBack } from './icons';

export default {
  components: {
    IconBack  
  }
};
</script>

Otherwise, you would have to import icons separately:

<template>
  <IconBackSmall></IconBackSmall>
</template>

<script>
import { IconBackSmall, IconBackMedium, IconBackLarge } from './icons';

export default {
  components: {
    IconBackSmall,
    IconBackMedium,
    IconBackLarge
  }
};
</script>

To aggregate icons, pass aggregate prop. It should be a one-item array containing the name of the aggregation dimension. It will also be used as the prop of the resulting component which determines which icon to use.