How to use the svgo function in svgo

_self.onmessage = ({ data: { id, payload } }: { data: Data }) => {
  delete payload.settings.optimizeSvg;

  const plugins = Object.keys(payload.settings).filter(
    key => payload.settings[key]
  );

  try {
    const svgo = new SVGO({
      full: true,
      // @ts-ignore
      plugins
    });

    svgo.optimize(payload.value).then(result => {
      _self.postMessage({
        id,
        payload: result.data
      });
    });
  } catch (e) {
    if (IS_DEV) {
      console.error(e);
    }
    _self.postMessage({

async function optimizeSvgs(srcSvgData: SvgData[]) {
  // https://github.com/svg/svgo
  const optimizePass = new Svgo({});
  const processPass = new Svgo({
    full: true,
    plugins: [
      {
        addFillNoneCss: {
          type: 'perItem',
          fn: (item, params) => {
            if (!Array.isArray(params.attrs)) {
              params.attrs = [params.attrs];
            }
            if (item.isElem()) {
              item.eachAttr(attr => {
                if (attr.name === 'fill') {
                  if (attr.value === 'none') {
                    item.class.add('ionicon-fill-none');
                  }
                  item.removeAttr('fill');

'use strict';
import fs from 'fs';
import SVGO from 'svgo';
import { getProjectUrl } from '../helpers';

const dirList = ['src', 'Icon'];
const dirPath = getProjectUrl(...dirList, 'svgs'),
    // https://github.com/svg/svgo
    svgo = new SVGO({
        plugins: [
            {
                removeStyleElement: true,
            },
            {
                removeXMLNS: true,
            },
            {
                cleanupAttrs: true,
            },
            {
                removeDoctype: true,
            },
            {
                removeXMLProcInst: true,
            },

async function optimizeSvg(svg) {
  // configure svgo
  const svgo = new Svgo({
    plugins: [
      { convertShapeToPath: false },
      { mergePaths: false },
      { moveGroupAttrsToElems: false },
      { removeAttrs: { attrs: '(fill|stroke.*)' } },
    ],
  });

  const optimizedSvg = await svgo.optimize(svg);

  return optimizedSvg.data;
}

// rebuild element as <svg>
	element.name = 'svg';

	delete element.attr.id;

	element.attr.viewBox = element.attr.viewBox || document.attr.viewBox;

	element.attr.xmlns = 'http://www.w3.org/2000/svg';

	const xml = element.toString({
		compressed: true
	});

	// promise data URI
	return (opts.svgo
		? new Svgo(opts.svgo).optimize(xml)
	: Promise.resolve({ data: xml }))
	.then(result =&gt; `data:image/svg+xml;${opts.utf8 ? `charset=utf-8,${encodeUTF8(result.data)}` : `base64,${Buffer.from(result.data).toString('base64')}`}`);
}
</svg>

import 'babel-polyfill';

import path from 'path';
import SVGO from 'svgo';
import Promise from 'bluebird';
import svg2js from 'svgo/lib/svgo/svg2js';
import js2svg from './js2svg';

const svgo = new SVGO();
const fs = Promise.promisifyAll(require('fs'));
const glob = Promise.promisify(require('glob'));

export default async (input, output, template, component) => {
  const camelCaps = (str) => str.split('-')
    .map((s) => s.substring(0, 1).toUpperCase() + s.substring(1, s.length))
    .join('');

  try {
    const matches = await glob(input);
    const files = await Promise.all(matches.map(async (match) => ({
      name: camelCaps(path.basename(match)),
      content: await fs.readFileAsync(match, 'utf-8')
    })));

    const svg = await Promise.all(files.map(

const REG_ATTRS = /(?:[\w:\-]*) *= *["\{]\{?(?:(?:(?:(?:(?:\\\W)*\\\W)*[^"\{]*)\\\W)*[^"}]*["}]}*)/g
const REG_ATTR = /([^=]+?)=(.*)/
const validAttrs = [
  'clipPath', 'cx', 'cy', 'd', 'dx', 'dy', 'fill', 'fillOpacity', 'fontFamily', 'fontSize', 'fx', 'fy',
  'gradientTransform', 'gradientUnits', 'markerEnd', 'markerMid', 'markerStart', 'offset', 'opacity',
  'patternContentUnits', 'patternUnits', 'points', 'preserveAspectRatio', 'r', 'rx', 'ry', 'spreadMethod',
  'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeLinecap', 'strokeOpacity', 'strokeWidth',
  'textAnchor', 'transform', 'version', 'viewBox', 'x1', 'x2', 'x', 'y1', 'y2', 'y', 'id', 'width', 'height',
  'xlinkActuate', 'xlinkArcrole', 'xlinkHref', 'xlinkRole', 'xlinkShow', 'xlinkTitle', 'xlinkType', 'xmlBase',
  'xmlLang', 'xmlSpace', 'style'
]
const validAttrsLC = validAttrs.map(attr => attr.toLowerCase())
const indexOfId = validAttrs.indexOf('id')

let autoIncTagKey = 0,
  svgo = new SVGO(configSVGO),
  converter = new HTMLtoJSX({ createClass: false })

function svg2react (source, callback) {
  let res = '',
    asJSX = ''

  try {
    svgo.optimize(source, result => {
      if (result.error) {
        console.warn(result.error)
        return callback(String(result.error))
      }
      try {
        asJSX = converter.convert(result.data)
        autoIncTagKey = 0
        res = generate(asJSX.replace(REG_TAG, replacer))

className: ['ionicon']
        }
      },
      {
        removeStyleElement: true
      },
      {
        removeScriptElement: true
      },
      {
        removeDimensions: true
      }
    ]
  });

  const validatePass = new Svgo({
    full: true,
    plugins: [
      {
        addFillNoneCss: {
          type: 'perItem',
          fn: (item, params) => {
            if (!Array.isArray(params.attrs)) {
              params.attrs = [params.attrs];
            }
            if (item.isElem()) {
              item.eachAttr(attr => {
                if (attr.name === 'style') {
                  throw new Error('Inline style detected');
                }
              });
            }

import SVGO from 'svgo'

export const svgo = new SVGO({
  multipass: true,
  plugins: [
    {
      cleanupAttrs: true
    },
    {
      removeDoctype: true
    },
    {
      removeXMLProcInst: true
    },
    {
      removeComments: true
    },
    {
      removeMetadata: true

const optimize = (input, plugins, callback) => {
  new svgo(plugins).optimize(input).then(result => callback(result.data))
}