feat: titleProps fallbacks to svg's title (#311)

packages/babel-plugin-svg-dynamic-title/src/index.js

@@ -11,20 +11,46 @@ const plugin = ({ types: t }) => ({
         return
       }
 
-      const titleElement = t.jsxElement(
-        t.jsxOpeningElement(t.jsxIdentifier('title'), []),
-        t.jsxClosingElement(t.jsxIdentifier('title')),
-        [t.jsxExpressionContainer(t.identifier('title'))],
-      )
+      function getTitleElement(existingTitleChildren = []) {
+        // create the expression for the title rendering
+        let expression = t.identifier('title')
+        // get the existing title string value
+        const existingTitle = (existingTitleChildren || [])
+          .map(c => c.value)
+          .join()
+        if (existingTitle) {
+          // if title exists
+          // render as follows
+          // {title === undefined ? existingTitle : title}
+          expression = t.conditionalExpression(
+            t.binaryExpression('===', expression, t.identifier('undefined')),
+            t.stringLiteral(existingTitle),
+            expression,
+          )
+        }
+
+        // create a title element with the given expression
+        return t.jsxElement(
+          t.jsxOpeningElement(t.jsxIdentifier('title'), []),
+          t.jsxClosingElement(t.jsxIdentifier('title')),
+          [t.jsxExpressionContainer(expression)],
+        )
+      }
+
+      // store the title element
+      let titleElement
 
       const hasTitle = path.get('children').some(childPath => {
         if (!childPath.isJSXElement()) return false
         if (childPath.node === titleElement) return false
         if (childPath.node.openingElement.name.name !== 'title') return false
+        titleElement = getTitleElement(childPath.node.children)
         childPath.replaceWith(titleElement)
         return true
       })
 
+      // create a title element if not already create
+      titleElement = titleElement || getTitleElement()
       if (!hasTitle) {
         // path.unshiftContainer is not working well :(
         // path.unshiftContainer('children', titleElement)

packages/babel-plugin-svg-dynamic-title/src/index.test.js

@@ -17,9 +17,9 @@ describe('plugin', () => {
     )
   })
 
-  it('should replace existing title by title attribute', () => {
+  it('should add title attribute and fallback to existing title', () => {
     expect(testPlugin('<svg><title>Hello</title></svg>')).toMatchInlineSnapshot(
-      `"<svg><title>{title}</title></svg>;"`,
+      `"<svg><title>{title === undefined ? \\"Hello\\" : title}</title></svg>;"`,
     )
   })
 

packages/babel-preset/src/index.test.js

@@ -68,6 +68,24 @@ describe('preset', () => {
                   export default SvgComponent;"
             `)
   })
+  it('should handle titleProp and fallback on existing title', () => {
+    expect(
+      testPreset('<svg><title>Old</title></svg>', {
+        titleProp: true,
+        state: {
+          componentName: 'SvgComponent',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = ({
+                    title
+                  }) => <svg><title>{title === undefined ? \\"Old\\" : title}</title></svg>;
+                  
+                  export default SvgComponent;"
+            `)
+  })
 
   it('should handle replaceAttrValues', () => {
     expect(

website/src/pages/docs/options.mdx

@@ -134,7 +134,8 @@ Add props to the root SVG tag.
 
 ## Title
 
-Add title tag via title property.
+Add title tag via title property. If titleProp is set to true and no title is provided (`title={undefined}`) at render time, this will
+fallback to existing title element in the svg if exists. 
 
 | Default | CLI Override | API Override        |
 | ------- | ------------ | ------------------- |