diff --git a/README.md b/README.md index aab8b95c..419b6506 100644 --- a/README.md +++ b/README.md @@ -91,13 +91,14 @@ Options: --no-prettier disable Prettier (default: true) --template specify a custom template to use --no-expand-props disable props expanding (default: true) - --ids keep ids within the svg --ref add svgRef prop to svg --icon use "1em" as width and height --no-view-box remove viewBox (default: true) --native add react-native support with react-native-svg --replace-attr-value [old=new] replace an attribute value -p, --precision set the number of digits in the fractional part (svgo) + --ids keep ids within the svg (svgo) + --keep-useless-defs keep elements of without id (svgo) --no-title remove title tag (svgo) (default: true) --tab-width specify the number of spaces by indentation-level (prettier) --use-tabs indent lines with tabs instead of spaces (prettier) @@ -389,6 +390,15 @@ Set number of digits in the fractional part. See | ------- | ------------------- | ------------------ | | `3` | `--precision ` | `precision: ` | +### Useless Defs + +Keep elements of `` without `id`. It also keep unused symbols. See +[SVGO `removeUselessDefs` plugin](https://github.com/svg/svgo). + +| Default | CLI Override | API Override | +| ------- | --------------------- | ------------------------- | +| `false` | `--keep-useless-defs` | `keepUselessDefs: ` | + ### Title Remove the title from SVG. See diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap index 0cca3ee4..f788c01e 100644 --- a/src/__snapshots__/index.test.js.snap +++ b/src/__snapshots__/index.test.js.snap @@ -1,5 +1,32 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`convert options keepUselessDefs: default 1`] = ` +"import React from \\"react\\"; + +const SvgComponent = props => ( + +); + +export default SvgComponent; +" +`; + +exports[`convert options keepUselessDefs: keepUselessDefs: true 1`] = ` +"import React from \\"react\\"; + +const SvgComponent = props => ( + + + + + + +); + +export default SvgComponent; +" +`; + exports[`convert should accept initial state (for webpack) 1`] = ` "import React from \\"react\\"; diff --git a/src/cli/index.js b/src/cli/index.js index 7e5ff1ea..e529ffc5 100644 --- a/src/cli/index.js +++ b/src/cli/index.js @@ -23,7 +23,6 @@ program .option('--no-prettier', 'disable Prettier') .option('--template ', 'specify a custom template to use') .option('--no-expand-props', 'disable props expanding') - .option('--ids', 'keep ids within the svg') .option('--ref', 'add svgRef prop to svg') .option('--icon', 'use "1em" as width and height') .option('--no-view-box', 'remove viewBox') @@ -37,6 +36,8 @@ program '-p, --precision ', 'set the number of digits in the fractional part (svgo)', ) + .option('--ids', 'keep ids within the svg (svgo)') + .option('--keep-useless-defs', 'keep elements of without id (svgo)') .option('--no-title', 'remove title tag (svgo)') .option( '--tab-width', diff --git a/src/configToOptions.js b/src/configToOptions.js index 8023b81c..1a211f38 100644 --- a/src/configToOptions.js +++ b/src/configToOptions.js @@ -20,6 +20,7 @@ const defaultConfig = { replaceAttrValues: [], expandProps: true, title: true, + keepUselessDefs: false, ids: false, precision: 3, // default to svgo semi: undefined, // default to prettier @@ -56,6 +57,7 @@ function configToOptions(config = {}) { if (!config.title || config.icon) plugins.push({ removeTitle: {} }) else if (config.title) plugins.push({ removeTitle: false }) if (config.viewBox) plugins.push({ removeViewBox: false }) + if (config.keepUselessDefs) plugins.push({ removeUselessDefs: false }) if (config.ids) plugins.push({ cleanupIDs: { remove: false } }) if (config.precision === 'number') svgoConfig.floatPrecision = Number(svgoConfig.precision) diff --git a/src/index.test.js b/src/index.test.js index 62e8cd7c..14fce0e9 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -274,4 +274,20 @@ describe('convert', () => { expect(result).toMatchSnapshot() }) + + describe('options', () => { + it('keepUselessDefs', async () => { + const svgWithUselessDefs = ` + + + + + +` + expect(await convert(svgWithUselessDefs)).toMatchSnapshot('default') + expect( + await convert(svgWithUselessDefs, { keepUselessDefs: true }), + ).toMatchSnapshot('keepUselessDefs: true') + }) + }) })