fix: some icons issues (#435)

* fix: use proper prefixing for icons defs ids

* fix: avoid showing the passed classes twice

* add changeset

.changeset/icon-double-class-vue.md

@@ -0,0 +1,7 @@
+---
+"@cypress-design/react-icon": patch
+"@cypress-design/vue-icon": patch
+"@cypress-design/icon-registry": patch
+---
+
+fix: avoid showing the passed classes twice

.changeset/icon-prefix-ids.md

@@ -0,0 +1,7 @@
+---
+"@cypress-design/react-icon": patch
+"@cypress-design/vue-icon": patch
+"@cypress-design/icon-registry": patch
+---
+
+fix: use proper prefixing for icons defs ids

components/Icon/react/IconReact.cy.tsx

@@ -64,4 +64,10 @@ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
 
     cy.get('svg title').should('have.text', 'This is a <b>title</b>')
   })
+
+  it('renders class passed only once', () => {
+    mount(<IconBrowserWebkit className="w-16 h-16" />)
+
+    cy.get('svg[width="16"]').should('have.attr', 'class', 'w-16 h-16')
+  })
 })

components/Icon/vue/IconVue.cy.tsx

@@ -23,7 +23,7 @@ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
     if (props.name) {
       return mount(() => <Icon {...props} />)
     }
-    mount(() => <IconDocumentBlank {...props} />)
+    mount(() => <IconDocumentBlank {...props} class={props.class} />)
   })
 
   it('renders correctly with array classes', () => {
@@ -128,4 +128,10 @@ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
 
     cy.get('svg title').should('have.text', 'This is a title')
   })
+
+  it('renders class passed only once', () => {
+    mount(() => <IconBrowserWebkit class="w-16 h-16" />)
+
+    cy.get('svg[width="16"]').should('have.attr', 'class', 'w-16 h-16')
+  })
 })

components/Icon/vue/generate-icons.js

@@ -66,7 +66,7 @@ const __iconComponentOpts__ = {
 
 function useIconProps(props: SVGAttributes & Omit<iconsRegistry.IconProps, 'name'>, iconBodiesAndDefs: Record<string, {body: string, defs?: string}>, availableSizes: string[], name: string) {
   return computed(() => {
-    const { interactiveColorsOnGroup, ...cleanProps } = props
+    const { interactiveColorsOnGroup, class:_, ...cleanProps } = props
 
     const { sizeWithDefault: size, compiledClasses } = iconsRegistry.getComponentAttributes({  
       ...cleanProps,

icon-registry/generate-icons-content.mjs

@@ -64,7 +64,10 @@ export default async function getIcons() {
       const [kebabCaseName, size] = iconName.split('_x')
       const svgContent = optimize(
         await fs.readFile(path.join(cwd, icon), 'utf8'),
-        config ?? undefined,
+        {
+          path: path.join(cwd, icon),
+          ...config,
+        },
       ).data
 
       const iconMetaWithSize = {

icon-registry/package.json

@@ -28,6 +28,7 @@
     "@types/lodash-es": "^4.17.12",
     "dedent": "^1.5.1",
     "globby": "^14.0.1",
+    "hash-sum": "^2.0.0",
     "lodash-es": "^4.17.21",
     "xml2js": "^0.6.2"
   }

icon-registry/svgo.config.js

@@ -1,3 +1,4 @@
+const hashSum = require('hash-sum')
 const extractBodyPlugin = require('./svgo-plugins/extractBodyPlugin')
 const moveDefsToEndPlugin = require('./svgo-plugins/moveDefsToEnd')
 
@@ -10,6 +11,10 @@ module.exports = {
       name: 'prefixIds',
       params: {
         prefixClassNames: false,
+        delim: '',
+        prefix: (el, ctx) => {
+          return `cy-svg-${hashSum(ctx.path)}`
+        },
       },
     },
     moveDefsToEndPlugin,

test/vue-app/src/App.vue

@@ -4,6 +4,11 @@ import Accordion from '@cypress-design/vue-accordion'
 import Checkbox from '@cypress-design/vue-checkbox'
 import Icon, {
   IconActionQuestionMarkCircle,
+  IconBrowserChrome,
+  IconBrowserEdge,
+  IconBrowserMozillaFirefox,
+  IconBrowserSafari,
+  IconBrowserWebkit,
   IconObjectBookCode,
   IconObjectMagnifyingGlass,
 } from '@cypress-design/vue-icon'
@@ -19,6 +24,13 @@ const showModal = ref(false)
 </script>
 
 <template>
+  <div class="my-40 mx-auto justify-center flex gap-4">
+    <IconBrowserChrome class="h-32 w-32" />
+    <IconBrowserSafari class="h-32 w-32" />
+    <IconBrowserMozillaFirefox class="h-32 w-32" />
+    <IconBrowserWebkit class="h-32 w-32" />
+    <IconBrowserEdge class="h-32 w-32" />
+  </div>
   <div
     class="@container/main mb-4 overflow-hidden max-w-[600px] mx-auto text-center"
   >