fix: make sure icons have an unique ID on autoconvert

packages/dnb-design-system-portal/src/shared/menu/SidebarGraphics.js

@@ -13,7 +13,7 @@ export default {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0)">
+      <g clipPath="url(#clip_about_the_lib)">
         <path
           d="M4.38397 23.25H2.36597C1.96814 23.25 1.58661 23.092 1.30531 22.8107C1.024 22.5294 0.865967 22.1478 0.865967 21.75V7.5C0.865967 7.10218 1.024 6.72064 1.30531 6.43934C1.58661 6.15804 1.96814 6 2.36597 6H4.38397"
           stroke="black"
@@ -51,7 +51,7 @@ export default {
         />
       </g>
       <defs>
-        <clipPath id="clip0">
+        <clipPath>
           <rect width="24" height="24" fill="white" />
         </clipPath>
       </defs>
@@ -129,7 +129,7 @@ export default {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0)">
+      <g clipPath="url(#clip_usage)">
         <path
           d="M1.81701 4.524L10.917 0.955998C11.6114 0.680998 12.3846 0.680998 13.079 0.955998L22.179 4.524C22.5032 4.66224 22.7785 4.89448 22.9694 5.19073C23.1603 5.48698 23.2581 5.83365 23.25 6.186V17.814C23.2584 18.1659 23.1612 18.5122 22.9711 18.8084C22.7809 19.1046 22.5065 19.3371 22.183 19.476L13.083 23.045C12.3882 23.318 11.6158 23.318 10.921 23.045L1.82101 19.476C1.49682 19.3378 1.2215 19.1055 1.0306 18.8093C0.839691 18.513 0.741958 18.1663 0.750012 17.814V6.186C0.741629 5.83411 0.838773 5.48776 1.02893 5.19156C1.2191 4.89536 1.49357 4.66286 1.81701 4.524V4.524Z"
           stroke="black"
@@ -160,7 +160,7 @@ export default {
         />
       </g>
       <defs>
-        <clipPath id="clip0">
+        <clipPath id="clip_usage">
           <rect width="24" height="24" fill="white" />
         </clipPath>
       </defs>
@@ -217,7 +217,7 @@ export default {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0)">
+      <g clipPath="url(#clip_helper_classes)">
         <path
           d="M12.75 0.750003C10.8788 0.747305 9.04097 1.24542 7.42723 2.19265C5.81349 3.13987 4.48264 4.50171 3.5728 6.13681C2.66295 7.77192 2.20726 9.62073 2.25302 11.4914C2.29877 13.362 2.8443 15.1863 3.833 16.775L0.75 23.25L7.224 20.166C8.60467 21.0248 10.1659 21.5512 11.7847 21.7037C13.4035 21.8562 15.0356 21.6307 16.5524 21.0449C18.0692 20.4592 19.4292 19.5292 20.5253 18.3282C21.6213 17.1272 22.4235 15.6881 22.8686 14.1243C23.3137 12.5604 23.3895 10.9145 23.0901 9.31639C22.7907 7.71824 22.1242 6.21147 21.1432 4.9148C20.1622 3.61814 18.8934 2.56703 17.4369 1.84429C15.9804 1.12156 14.376 0.746955 12.75 0.750003V0.750003Z"
           stroke="black"
@@ -241,7 +241,7 @@ export default {
         />
       </g>
       <defs>
-        <clipPath id="clip0">
+        <clipPath id="clip_helper_classes">
           <rect width="24" height="24" fill="white" />
         </clipPath>
       </defs>
@@ -363,7 +363,7 @@ export default {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0)">
+      <g clipPath="url(#clip_development)">
         <path
           d="M2.25 21.75C1.85218 21.75 1.47064 21.592 1.18934 21.3107C0.908035 21.0294 0.75 20.6478 0.75 20.25V3.865C0.751319 3.43708 0.921893 3.02707 1.22448 2.72448C1.52707 2.42189 1.93708 2.25132 2.365 2.25H21.643C22.0688 2.25132 22.4768 2.42105 22.7779 2.72214C23.079 3.02322 23.2487 3.4312 23.25 3.857V20.135C23.2487 20.5629 23.0781 20.9729 22.7755 21.2755C22.4729 21.5781 22.0629 21.7487 21.635 21.75H2.25Z"
           stroke="black"
@@ -401,7 +401,7 @@ export default {
         />
       </g>
       <defs>
-        <clipPath id="clip0">
+        <clipPath id="clip_development">
           <rect width="24" height="24" fill="white" />
         </clipPath>
       </defs>

packages/dnb-ui-lib/scripts/prepub/tasks/convertSvgToJsx.js

@@ -87,6 +87,10 @@ const transformToJsx = (content, file) => {
   const filename = basename.replace(path.extname(file.path), '')
   const componentName = iconCase(filename)
   try {
+    content = content.replace(
+      /clip0/g,
+      `clip${Math.round(Math.random() * 999 + 1000)}`
+    )
     return new Promise((resolve, reject) =>
       svgr(
         content,

packages/dnb-ui-lib/src/icons/bell.js

@@ -7,7 +7,7 @@ const bell = props => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M8 0a.75.75 0 0 1 .75.75v.55a5.75 5.75 0 0 1 5 5.701c0 2.302.246 3.594.465 4.285.109.343.209.53.263.616.018.029.03.046.037.055A.75.75 0 0 1 14 13.25H2a.75.75 0 0 1-.59-1.214c.013-.022.04-.068.077-.14.072-.142.18-.392.294-.775.226-.766.469-2.068.469-4.12a5.751 5.751 0 0 1 5-5.702V.75A.75.75 0 0 1 8 0zm0 2.75A4.25 4.25 0 0 0 3.75 7c0 2.17-.257 3.618-.53 4.546l-.064.204h9.633l-.004-.011c-.28-.885-.535-2.343-.535-4.739A4.25 4.25 0 0 0 8 2.75zM6.455 13.53a.75.75 0 0 1 .931.509.641.641 0 0 0 1.231 0 .75.75 0 1 1 1.44.422 2.141 2.141 0 0 1-4.11 0 .75.75 0 0 1 .508-.93z"
+      d="M8 0a.75.75 0 0 1 .75.75V1.3c2.821.367 5 2.78 5 5.701 0 2.302.246 3.594.465 4.285.109.343.209.53.263.616.018.029.03.046.037.055A.75.75 0 0 1 14 13.25H2a.75.75 0 0 1-.59-1.214c.013-.022.04-.068.077-.14.072-.142.18-.392.294-.775.226-.766.469-2.068.469-4.12a5.751 5.751 0 0 1 5-5.702V.75A.75.75 0 0 1 8 0zm0 2.75A4.25 4.25 0 0 0 3.75 7c0 2.17-.257 3.618-.53 4.546l-.064.204h9.633l-.004-.011c-.28-.885-.535-2.343-.535-4.739A4.25 4.25 0 0 0 8 2.75zM6.455 13.53a.75.75 0 0 1 .931.509.641.641 0 0 0 1.231 0 .75.75 0 1 1 1.44.422 2.141 2.141 0 0 1-4.11 0 .75.75 0 0 1 .508-.93z"
       fill="#000"
     />
   </svg>

packages/dnb-ui-lib/src/icons/check_alt_01.js

@@ -4,16 +4,16 @@ import React from 'react'
 
 const check_alt_01 = props => (
   <svg viewBox="0 0 16 16" fill="none" {...props}>
-    <g clipPath="url(#clip0)">
+    <g clipPath="url(#clip1257)">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.828 1.514a.75.75 0 1 0-1.152-.96L6.772 10.04a.368.368 0 0 1-.582-.022L3.777 6.641a.75.75 0 1 0-1.22.872l2.412 3.377a1.868 1.868 0 0 0 2.955.11l7.904-9.486zM1.498 8.517a5.672 5.672 0 0 1 5.699-5.699c.9 0 1.787.194 2.53.566a.75.75 0 0 0 .672-1.342c-.976-.488-2.096-.724-3.202-.724a7.172 7.172 0 0 0-7.2 7.2 7.173 7.173 0 0 0 7.2 7.198c3.997 0 7.2-3.202 7.2-7.199a9.54 9.54 0 0 0-.154-1.556.75.75 0 1 0-1.48.246c.07.422.133.873.133 1.31 0 3.169-2.53 5.7-5.699 5.7s-5.7-2.531-5.7-5.7z"
+        d="M15.828 1.514a.75.75 0 1 0-1.152-.96L6.772 10.04a.368.368 0 0 1-.582-.022L3.777 6.641a.75.75 0 1 0-1.22.872l2.412 3.377a1.868 1.868 0 0 0 2.955.11l7.904-9.486zM1.498 8.517c0-3.168 2.53-5.699 5.699-5.699.9 0 1.787.194 2.53.566a.75.75 0 0 0 .672-1.342c-.976-.488-2.096-.724-3.202-.724a7.172 7.172 0 0 0-7.2 7.2c0 3.996 3.203 7.198 7.2 7.198 3.997 0 7.2-3.202 7.2-7.199a9.54 9.54 0 0 0-.154-1.556.75.75 0 1 0-1.48.246c.07.422.133.873.133 1.31 0 3.169-2.53 5.7-5.699 5.7s-5.7-2.531-5.7-5.7z"
         fill="#000"
       />
     </g>
     <defs>
-      <clipPath id="clip0">
+      <clipPath id="clip1257">
         <path fill="#fff" d="M0 0h16v16H0z" />
       </clipPath>
     </defs>

packages/dnb-ui-lib/src/icons/exclamation.js

@@ -7,7 +7,7 @@ const exclamation = props => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M8 1.75a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7A.75.75 0 0 1 8 1.75zm-.893 10.357A1.25 1.25 0 0 1 8 11.75c.32 0 .646.11.893.357s.357.573.357.893c0 .32-.11.646-.357.893A1.249 1.249 0 0 1 8 14.25c-.32 0-.646-.11-.893-.357A1.249 1.249 0 0 1 6.75 13c0-.32.11-.646.357-.893z"
+      d="M8 1.75a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7A.75.75 0 0 1 8 1.75zm-.893 10.357c.247-.247.573-.357.893-.357.32 0 .646.11.893.357s.357.573.357.893c0 .32-.11.646-.357.893A1.249 1.249 0 0 1 8 14.25c-.32 0-.646-.11-.893-.357A1.249 1.249 0 0 1 6.75 13c0-.32.11-.646.357-.893z"
       fill="#000"
     />
   </svg>