Added Id Prefix/Suffix plugin

build/build.sh

@@ -6,6 +6,7 @@ npm run build --workspace @svgr/babel-plugin-remove-jsx-attribute
 npm run build --workspace @svgr/babel-plugin-remove-jsx-empty-expression
 npm run build --workspace @svgr/babel-plugin-replace-jsx-attribute-value
 npm run build --workspace @svgr/babel-plugin-svg-dynamic-title
+npm run build --workspace @svgr/babel-plugin-svg-dynamic-id
 npm run build --workspace @svgr/babel-plugin-svg-em-dimensions
 npm run build --workspace @svgr/babel-plugin-transform-react-native-svg
 npm run build --workspace @svgr/babel-plugin-transform-svg-component

packages/babel-plugin-svg-dynamic-id/.npmignore

@@ -0,0 +1,4 @@
+/*
+/dist/*
+!/dist/index.{d.ts,js}
+!/dist/index.js.map

packages/babel-plugin-svg-dynamic-id/README.md

@@ -0,0 +1,27 @@
+# @svgr/babel-plugin-svg-dynamic-title
+
+## Install
+
+```
+npm install --save-dev @svgr/babel-plugin-svg-dynamic-id
+```
+
+## Usage
+
+**.babelrc**
+
+```json
+{
+  "plugins": [
+    "@svgr/babel-plugin-svg-dynamic-id",
+    {
+      "prefix": true,
+      "suffix": false
+    }
+  ]
+}
+```
+
+## License
+
+MIT

packages/babel-plugin-svg-dynamic-id/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@svgr/babel-plugin-svg-dynamic-id",
+  "version": "6.5.1",
+  "description": "Transform SVG by adding a dynamic prefixable/suffixable id",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },  "scripts": {
+    "reset": "rm -rf dist",
+    "build": "rollup -c ../../build/rollup.config.js",
+    "prepublishOnly": "npm run reset && npm run build"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "babel-plugin"
+  ],
+  "homepage": "https://react-svgr.com",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/gregberge"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0"
+  },
+  "author": "Alfie Jones <alfie.jones@hotmail.co.uk>",
+  "license": "MIT"
+}

packages/babel-plugin-svg-dynamic-id/src/index.test.ts

@@ -0,0 +1,180 @@
+import { transform } from '@babel/core'
+import plugin, { getValueWithProps, Options } from '.'
+
+const testPlugin = (code: string, options: Options) => {
+  const result = transform(code, {
+    plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
+    configFile: false,
+  })
+
+  return result?.code
+}
+
+describe('id plugin', () => {
+  it('getValueWithProps should return value', () => {
+    expect(
+      getValueWithProps('test', {
+        prefix: false,
+        suffix: false,
+      }),
+    ).toMatchInlineSnapshot(`"test"`)
+  })
+
+  it('getValueWithProps should prefix value', () => {
+    expect(
+      getValueWithProps('test', {
+        prefix: true,
+        suffix: false,
+      }),
+    ).toMatchInlineSnapshot(`"\${props.prefix}test"`)
+  })
+
+  it('getValueWithProps should suffix value', () => {
+    expect(
+      getValueWithProps('test', {
+        prefix: false,
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(`"test\${props.suffix}"`)
+  })
+
+  it('getValueWithProps should prefix and suffix value', () => {
+    expect(
+      getValueWithProps('test', {
+        prefix: true,
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(`"\${props.prefix}test\${props.suffix}"`)
+  })
+
+  it('should not prefix id', () => {
+    expect(
+      testPlugin('<svg id="test"></svg>', {
+        prefix: false,
+        suffix: false,
+      }),
+    ).toMatchInlineSnapshot(`"<svg id="test"></svg>;"`)
+  })
+
+  it('should prefix svg', () => {
+    expect(
+      testPlugin('<svg id="test"></svg>', {
+        prefix: true,
+      }),
+    ).toMatchInlineSnapshot(`"<svg id={\`\${props.prefix}test\`}></svg>;"`)
+  })
+
+  it('should suffix svg', () => {
+    expect(
+      testPlugin('<svg id="test"></svg>', {
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(`"<svg id={\`test\${props.suffix}\`}></svg>;"`)
+  })
+
+  it('should prefix and suffix svg', () => {
+    expect(
+      testPlugin('<svg id="test"></svg>', {
+        prefix: true,
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg id={\`\${props.prefix}test\${props.suffix}\`}></svg>;"`,
+    )
+  })
+
+  it('should prefix masks', () => {
+    expect(
+      testPlugin('<svg><g mask="url(#test)"></g></svg>', {
+        prefix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><g mask={\`url(#\${props.prefix}test)\`}></g></svg>;"`,
+    )
+  })
+
+  it('should prefix clipPath', () => {
+    expect(
+      testPlugin('<svg><g clip-path="url(#test)"></g></svg>', {
+        prefix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><g clip-path={\`url(#\${props.prefix}test)\`}></g></svg>;"`,
+    )
+  })
+
+  it('should suffix clipPath', () => {
+    expect(
+      testPlugin('<svg><g clip-path="url(#test)"></g></svg>', {
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><g clip-path={\`url(#test\${props.suffix})\`}></g></svg>;"`,
+    )
+  })
+
+  it('should prefix and suffix clipPath', () => {
+    expect(
+      testPlugin('<svg><g clip-path="url(#test)"></g></svg>', {
+        prefix: true,
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><g clip-path={\`url(#\${props.prefix}test\${props.suffix})\`}></g></svg>;"`,
+    )
+  })
+
+  it('should prefix fill', () => {
+    expect(
+      testPlugin('<svg><g fill="url(#test)"></g></svg>', {
+        prefix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><g fill={\`url(#\${props.prefix}test)\`}></g></svg>;"`,
+    )
+  })
+
+  it('should prefix defs', () => {
+    expect(
+      testPlugin(
+        '<svg><defs><linearGradient id="test"></linearGradient></defs></svg>',
+        {
+          prefix: true,
+        },
+      ),
+    ).toMatchInlineSnapshot(
+      `"<svg><defs><linearGradient id={\`\${props.prefix}test\`}></linearGradient></defs></svg>;"`,
+    )
+  })
+
+  it('should prefix use', () => {
+    expect(
+      testPlugin('<svg><use xlink:href="#test"></use></svg>', {
+        prefix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><use xlink:href={\`#\${props.prefix}test\`}></use></svg>;"`,
+    )
+  })
+
+  it('should suffix use', () => {
+    expect(
+      testPlugin('<svg><use xlink:href="#test"></use></svg>', {
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><use xlink:href={\`#test\${props.suffix}\`}></use></svg>;"`,
+    )
+  })
+
+  it('should prefix and suffix use', () => {
+    expect(
+      testPlugin('<svg><use xlink:href="#test"></use></svg>', {
+        prefix: true,
+        suffix: true,
+      }),
+    ).toMatchInlineSnapshot(
+      `"<svg><use xlink:href={\`#\${props.prefix}test\${props.suffix}\`}></use></svg>;"`,
+    )
+  })
+})

packages/babel-plugin-svg-dynamic-id/src/index.ts

@@ -0,0 +1,67 @@
+import { NodePath, types as t, ConfigAPI, template } from '@babel/core'
+
+export interface Options {
+  prefix?: boolean
+  suffix?: boolean
+}
+
+export const getValueWithProps = (value: string, { prefix, suffix }: Options) =>
+  `${prefix ? '${props.prefix}' : ''}${value}${suffix ? '${props.suffix}' : ''}`
+
+const getAttributeValue = (value: string, opts: Options) => {
+  let id = ''
+  let prefix = ''
+  let suffix = ''
+  if (value.charAt(0) === '#') {
+    id = value.slice(1)
+    prefix = '#'
+  } else if (value.match(/^url\(#/)) {
+    id = value.slice(5, -1)
+    prefix = 'url(#'
+    suffix = ')'
+  }
+  if (id) {
+    return t.jsxExpressionContainer(
+      (
+        template.ast(
+          `\`${prefix}${getValueWithProps(id, opts)}${suffix}\``,
+        ) as t.ExpressionStatement
+      ).expression,
+    )
+  }
+}
+
+const getIdValue = (value: string, opts: Options) =>
+  t.jsxExpressionContainer(
+    (
+      template.ast(
+        `\`${getValueWithProps(value, opts)}\``,
+      ) as t.ExpressionStatement
+    ).expression,
+  )
+
+const plugin = (api: ConfigAPI, opts: Options) => ({
+  visitor: {
+    JSXAttribute(path: NodePath<t.JSXAttribute>) {
+      if (!opts.prefix && !opts.suffix) return
+
+      const valuePath = path.get('value')
+      const namePath = path.get('name')
+
+      const value = valuePath?.container?.value?.value
+      const name = namePath?.container?.name?.name
+
+      if (name === 'id') {
+        console.log('ITS AN ID')
+        valuePath.replaceWith(getIdValue(value, opts))
+      } else {
+        const attr = getAttributeValue(value, opts)
+        if (attr) {
+          valuePath.replaceWith(attr)
+        }
+      }
+    },
+  },
+})
+
+export default plugin

packages/babel-plugin-svg-dynamic-id/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"]
+}