feat: add option to keeps IDs from SVG

README.md

@@ -89,6 +89,7 @@ powerful and configurable HTML transpiler. It uses AST (like
     --no-prettier                    disable Prettier
     --template <file>                specify a custom template to use
     --no-expand-props                disable props expanding
+    --ids                            keep ids within the svg
     --icon                           use "1em" as width and height
     --replace-attr-value [old=new]   replace an attribute value
     -p, --precision <value>          set the number of digits in the fractional part (svgo)
@@ -289,6 +290,16 @@ Setting this to `false` will remove the viewBox property.
 | ------- | --------------- | ----------------- |
 | `true`  | `--no-view-box` | `viewBox: <bool>` |
 
+### Ids
+
+Setting this to `true` will keep ids. It can be useful to target specific ids
+using CSS or third party library (eg:
+[react-mutate-icon](https://github.com/lifeiscontent/react-mutate-icon)).
+
+| Default | CLI Override | API Override  |
+| ------- | ------------ | ------------- |
+| `false` | `--ids`      | `ids: <bool>` |
+
 ### Replace attribute value
 
 Replace an attribute value by an other. The main usage of this option is to

src/cli/__snapshots__/index.test.js.snap

@@ -14,6 +14,33 @@ export default One;
 "
 `;
 
+exports[`cli --ids 1`] = `
+"import React from \\"react\\";
+
+const One = props => (
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+    <title>Rectangle 5</title>
+    <g id=\\"Page-1\\" fill=\\"none\\" fillRule=\\"evenodd\\">
+      <g id=\\"19-Separator\\" transform=\\"translate(-129 -156)\\" fill=\\"#063855\\">
+        <g id=\\"Controls/Settings\\" transform=\\"translate(80)\\">
+          <g id=\\"Content\\" transform=\\"translate(0 64)\\">
+            <g id=\\"Group\\" transform=\\"translate(24 56)\\">
+              <g id=\\"Group-2\\">
+                <path id=\\"Rectangle-5\\" d=\\"M25 36h48v1H25z\\" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default One;
+
+"
+`;
+
 exports[`cli --no-expand-props 1`] = `
 "import React from \\"react\\";
 

src/cli/index.js

@@ -23,6 +23,7 @@ program
   .option('--no-prettier', 'disable Prettier')
   .option('--template <file>', 'specify a custom template to use')
   .option('--no-expand-props', 'disable props expanding')
+  .option('--ids', 'keep ids within the svg')
   .option('--icon', 'use "1em" as width and height')
   .option('--no-view-box', 'remove viewBox')
   .option(

src/cli/index.test.js

@@ -40,6 +40,11 @@ describe('cli', () => {
     expect(stdout).toMatchSnapshot()
   })
 
+  it('--ids', async () => {
+    const [stdout] = await exec('babel-node src/cli --ids __fixtures__/one.svg')
+    expect(stdout).toMatchSnapshot()
+  })
+
   it('--no-view-box', async () => {
     const [stdout] = await exec(
       'babel-node src/cli --no-view-box __fixtures__/one.svg',

src/configToOptions.js

@@ -15,6 +15,7 @@ const defaultConfig = {
   replaceAttrValues: [],
   expandProps: true,
   title: true,
+  ids: false,
   precision: 3, // default to svgo
   semi: undefined, // default to prettier
   singleQuote: undefined, // default to prettier
@@ -46,6 +47,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.ids) plugins.push({ cleanupIDs: { remove: false } })
     if (config.precision === 'number')
       svgoConfig.floatPrecision = Number(svgoConfig.precision)
     return svgoConfig