Skip to content

v7.0.0 - Autumn Leaves

Compare
Choose a tag to compare
@nivekcode nivekcode released this 05 Oct 11:33
· 182 commits to master since this release

7.0.0 (2021-10-05)

chore

  • (svgo) update svgo to v2: update svgo to v2 - config object change (688223e), closes #127

BREAKING CHANGES

  • (svgo) update svgo to v2: svg-to-ts now ships with svgo 2. SVGO 2 has different syntax of passing
    configuration. Furthermore we use the SVGO default object and dont introduce a custom fallback
    anymore

What changed

Update SVGO to v2

To optimize icons we internally use SVGO. In v7 we now use SVGO v2 under the hood. SVGO v2 brings a bunch of performance optimization and a new way to pass configurations. More on the official SVGO page.

SVGO config

Custom SVGO configurations now have to be specified in a svgo.config.js file located in the root of your project. The svgo.config.js has to export a configuration object. For example.

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // customize options for plugins included in preset
          builtinPluginName: {
            optionName: 'optionValue',
          },
          // or disable plugins
          anotherBuiltinPlugin: false,
        },
      },
    },
    // Enable builtin plugin not included in preset
    'moreBuiltinPlugin',
    // Enable and configure builtin plugin not included in preset
    {
      name: 'manyBuiltInPlugin',
      params: {
        optionName: 'value',
      },
    },
  ],
};

Consult the official SVGO page to find out more.

No more SVGO default config from svg-to-ts
In v6 svg-to-ts was using its own default for SVGO. In v7 we removed the default config and rely on the default of SVGO.

In case you prefer to still use the same options as today please add a svgo.config.js with the following content to the root of your project.

  module.exports = {
    plugins: [
      'cleanupAttrs',
      'removeDoctype',
      'removeXMLProcInst',
      'removeComments',
      'removeMetadata',
      'removeTitle',
      'removeDesc',
      'removeUselessDefs',
      'removeEditorsNSData',
      'removeEmptyAttrs',
      'removeHiddenElems',
      'removeEmptyText',
      'removeEmptyContainers',
      'cleanupEnableBackground',
      'convertStyleToAttrs',
      'convertColors',
      'convertPathData',
      'convertTransform',
      'removeUnknownsAndDefaults',
      'removeNonInheritableGroupAttrs',
      'removeUselessStrokeAndFill',
      'removeUnusedNS',
      'cleanupIDs',
      'cleanupNumericValues',
      'moveElemsAttrsToGroup',
      'moveGroupAttrsToElems',
      'collapseGroups',
      'mergePaths',
      'convertShapeToPath',
      'sortAttrs',
      'removeDimensions',
      'prefixIds',
    ]
  }

This config is almost the same as the default config from SVGO. But it disables the removeViewBox and the removeRasterImage properties.

completeIconSet renamed

In v6 svg-to-ts generates a completeIconSet file. However, the convention for filenames is not camelcase but kebap case. Therefore in v7 we will generate the complete icon set in a file named complete-icon-set.

How to migrate

  • If you happy with the SVGO defaults you don't have to do anything.
  • If you want to apply the same defaults as in v6 (disable removeViewBox and removeRasterImage) you have to add a svgo.config.js file with the following content to the root of your project.
module.exports = {
    plugins: [
      'cleanupAttrs',
      'removeDoctype',
      'removeXMLProcInst',
      'removeComments',
      'removeMetadata',
      'removeTitle',
      'removeDesc',
      'removeUselessDefs',
      'removeEditorsNSData',
      'removeEmptyAttrs',
      'removeHiddenElems',
      'removeEmptyText',
      'removeEmptyContainers',
      'cleanupEnableBackground',
      'convertStyleToAttrs',
      'convertColors',
      'convertPathData',
      'convertTransform',
      'removeUnknownsAndDefaults',
      'removeNonInheritableGroupAttrs',
      'removeUselessStrokeAndFill',
      'removeUnusedNS',
      'cleanupIDs',
      'cleanupNumericValues',
      'moveElemsAttrsToGroup',
      'moveGroupAttrsToElems',
      'collapseGroups',
      'mergePaths',
      'convertShapeToPath',
      'sortAttrs',
      'removeDimensions',
      'prefixIds',
    ]
  }