@cypress-design/react-icon 0.31.0 → 0.32.0

package/.turbo/turbo-build.log

@@ -9,5 +9,5 @@ $ rollup -c ./rollup.config.mjs
 index.ts
 
 Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-created ./dist/index.umd.js, ./dist/index.es.mjs in 9.4s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 10.7s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @cypress-design/react-icon
 
+## 0.32.0
+
+### Minor Changes
+
+- [#391](https://github.com/cypress-io/cypress-design/pull/391) [`7f9ebbb`](https://github.com/cypress-io/cypress-design/commit/7f9ebbb83744d4109498f921f7de5539ccc3b479) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: add alt prop to icons to make them accessible if not presentational
+
+### Patch Changes
+
+- [#367](https://github.com/cypress-io/cypress-design/pull/367) [`2f984a0`](https://github.com/cypress-io/cypress-design/commit/2f984a02807f344a878ac65ac9fab62bc0c9442d) Thanks [@elevatebart](https://github.com/elevatebart)! - first creation of menu item
+
+- Updated dependencies [[`7f9ebbb`](https://github.com/cypress-io/cypress-design/commit/7f9ebbb83744d4109498f921f7de5539ccc3b479), [`2f984a0`](https://github.com/cypress-io/cypress-design/commit/2f984a02807f344a878ac65ac9fab62bc0c9442d)]:
+  - @cypress-design/icon-registry@0.35.0
+  - @cypress-design/constants-icon@0.0.2
+
 ## 0.31.0
 
 ### Minor Changes

package/IconReact.cy.tsx

@@ -8,7 +8,7 @@ import Icon, {
 } from './index'
 
 describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
-  it('renders correctly', () => {
+  it('renders correctly', { viewportWidth: 500, viewportHeight: 500 }, () => {
     mount(
       <ul className="m-4">
         <li className="flex items-center px-2 mb-3">
@@ -37,7 +37,7 @@ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
             Add a new icon
           </button>
         </li>
-      </ul>
+      </ul>,
     )
   })
 
@@ -53,7 +53,15 @@ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
       <div className="p-2">
         <IconBrowserWebkit className="w-16 h-16 hidden" />
         <IconBrowserWebkit className="w-16 h-16" />
-      </div>
+      </div>,
     )
   })
+
+  it('renders a title element when passed an alt prop', () => {
+    mount(
+      <IconBrowserWebkit className="w-16 h-16" alt="This is a <b>title</b>" />,
+    )
+
+    cy.get('svg title').should('have.text', 'This is a <b>title</b>')
+  })
 })

package/_TreeShakableIcons.ts

@@ -946,8 +946,11 @@ export const IconGeneralChatBubble: React.FC<
 > = (props) => React.createElement('svg', useIconProps(props, {
 "16": {
   "body": "<path fill=\"#D0D2E0\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 3H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2v3l5-3h3a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z\" class=\"icon-dark-stroke icon-light-fill\"/>"
+},
+"24": {
+  "body": "<path fill=\"#F3F4FA\" d=\"M19 18a3 3 0 0 0 3-3v-4a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h1l3.915 1.957a.75.75 0 0 0 1.085-.67z\" class=\"icon-light-secondary\"/><path stroke=\"#1B1E2E\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 18a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2l5 2.5V18z\" class=\"icon-dark\"/><path fill=\"#BFC2D4\" d=\"M17 7a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3v1.287a.75.75 0 0 0 1.085.67L10 14h4a3 3 0 0 0 3-3z\" class=\"icon-light\"/><path stroke=\"#1B1E2E\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1v2.5l5-2.5h5a2 2 0 0 0 2-2z\" class=\"icon-dark\"/><path fill=\"#1B1E2E\" d=\"M7 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0M10.5 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0M14 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0\" class=\"icon-dark\"/>"
 }
-}, ["16"], "general-chat-bubble"))
+}, ["16","24"], "general-chat-bubble"))
 
 
 export const IconGeneralClipboard: React.FC<
@@ -1282,8 +1285,11 @@ export const IconObjectBugSmall: React.FC<
 > = (props) => React.createElement('svg', useIconProps(props, {
 "16": {
   "body": "<path fill=\"#D0D2E0\" fill-rule=\"evenodd\" d=\"M6 7H5v4s1 2 3 2 3-2 3-2V7H6\" class=\"icon-light\" clip-rule=\"evenodd\"/><path fill=\"#D0D2E0\" d=\"M6 5v2h4V5a2 2 0 1 0-4 0\" class=\"icon-light\"/><path fill=\"currentColor\" d=\"M13 10a1 1 0 1 0 0-2zM3 8a1 1 0 0 0 0 2zm11-3a1 1 0 1 0-2 0zM4 5a1 1 0 0 0-2 0zm8 8a1 1 0 1 0 2 0zM2 13a1 1 0 1 0 2 0zm3-5h1V6H5zm2-1V5H5v2zM6 8h4V6H6zm4 0h1V6h-1zM9 5v2h2V5zm1 2v2h2V7zm1 3h2V8h-2zM6 9V7H4v2zM5 8H3v2h2zm5 1v2h2V9zm1 2-.894-.448v-.002l.002-.001v-.002l-.002.005a2 2 0 0 1-.126.206 3.6 3.6 0 0 1-.437.535C9.152 11.683 8.64 12 8 12v2c1.359 0 2.348-.684 2.957-1.293a5.6 5.6 0 0 0 .914-1.214l.015-.029.005-.01.002-.004v-.001l.001-.001zm-5 0V9H4v2zm2 1c-.641 0-1.152-.316-1.543-.707a3.6 3.6 0 0 1-.563-.741l-.002-.005v.002l.001.001v.002h.001L5 11l-.894.448.001.002.002.004.005.01a2 2 0 0 0 .065.118 5.555 5.555 0 0 0 .864 1.125C5.652 13.317 6.64 14 8 14zm0-8a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3zM7 5a1 1 0 0 1 1-1V2a3 3 0 0 0-3 3zm5 0a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3zM5 6a1 1 0 0 1-1-1H2a3 3 0 0 0 3 3zm6 6a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3zm-7 1a1 1 0 0 1 1-1v-2a3 3 0 0 0-3 3z\" class=\"icon-dark\"/>"
+},
+"24": {
+  "body": "<path fill=\"#D0D2E0\" d=\"M15 10V7a3 3 0 1 0-6 0v3zM15 10H9a3.16 3.16 0 0 0-2 2v4a4.564 4.564 0 0 0 4.014 3.89l.685.076q.301.034.602 0l.685-.076A4.564 4.564 0 0 0 17 16v-4a3.16 3.16 0 0 0-2-2\" class=\"icon-light\"/><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"2\" d=\"M17 12v2m0-2 .265-.088A4 4 0 0 0 20 8.117V7m-3 5v0a3.16 3.16 0 0 0-2-2v0m0 0V7a3 3 0 0 0-3-3v0a3 3 0 0 0-3 3v3m6 0H9m0 0v0a3.16 3.16 0 0 0-2 2v0m0 0v2m0-2-.265-.088A4 4 0 0 1 4 8.117V7m13 7h3m-3 0v2M7 14H4m3 0v2m10 0v0a4.564 4.564 0 0 1-4.014 3.89l-.685.076q-.301.034-.602 0l-.685-.076A4.564 4.564 0 0 1 7 16v0m10 0 .265.088A4 4 0 0 1 20 19.883V21M7 16l-.265.088A4 4 0 0 0 4 19.883V21\" class=\"icon-dark\"/>"
 }
-}, ["16"], "object-bug-small"))
+}, ["16","24"], "object-bug-small"))
 
 
 export const IconObjectBug: React.FC<
@@ -2120,6 +2126,15 @@ export const IconTechnologyElementSelector: React.FC<
 }, ["16"], "technology-element-selector"))
 
 
+export const IconTechnologyGitBranches: React.FC<
+  Omit<iconsRegistry.IconTechnologyGitBranchesProps, 'name'> & React.SVGProps<SVGSVGElement>
+> = (props) => React.createElement('svg', useIconProps(props, {
+"24": {
+  "body": "<path fill=\"#D0D2E0\" d=\"M11 4a1 1 0 0 0-1-1H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h4.026a.974.974 0 0 0 .974-.974 2 2 0 0 0-.824-1.616l-3.029-2.203A4 4 0 0 1 5.5 12.972V12.5a1 1 0 1 1 2 0v.472a2 2 0 0 0 .824 1.618L11 16.536v-3.538c0-.628-.297-1.22-.8-1.598l-1.6-1.2A4 4 0 0 1 7 7v-.5a1 1 0 0 1 2 0V7a2 2 0 0 0 .8 1.6l1.2.9z\" class=\"icon-light-secondary\"/><path fill=\"#E1E3ED\" d=\"M13 20a1 1 0 0 0 1 1h4a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v8.955l1.728-1.344a2 2 0 0 0 .772-1.578V9.5a1 1 0 1 1 2 0v.533a4 4 0 0 1-1.544 3.157l-2.184 1.699A2 2 0 0 0 13 16.466z\" class=\"icon-light\"/><path fill=\"#1B1E2E\" d=\"M16.5 10.033h1zm1-.533a1 1 0 1 0-2 0zm-6.7 1.1.6-.8zM9.2 9.4l-.6.8zM9 6.5a1 1 0 0 0-2 0zm1.765 11.102-.589.808zm-3.03-2.203-.588.808zM7.5 12.5a1 1 0 1 0-2 0zm7.842-.1-.614-.789zm-2.184 1.7.614.789zM6 3v1zm12 0V2zm2 3v12h2V6zM4 18V6H2v12zm13.5-7.967V9.5h-2v.533zM11.4 9.8 9.8 8.6l-1.2 1.6 1.6 1.2zM9 7v-.5H7V7zm2.353 9.793-3.03-2.203-1.176 1.617 3.03 2.203zM7.5 12.973V12.5h-2v.472zm7.228-1.362-2.184 1.699 1.228 1.579 2.184-1.699zM13 12.997V3h-2v9.998zm-.456.313A4 4 0 0 0 11 16.466h2a2 2 0 0 1 .772-1.578zm-4.22 1.28a2 2 0 0 1-.824-1.618h-2a4 4 0 0 0 1.647 3.235zM9.8 8.6A2 2 0 0 1 9 7H7a4 4 0 0 0 1.6 3.2zm.376 9.81A2 2 0 0 1 11 20.026l2-.001a4 4 0 0 0-1.647-3.232zm5.324-8.377a2 2 0 0 1-.772 1.579l1.228 1.578a4 4 0 0 0 1.544-3.157zM10.2 11.4a2 2 0 0 1 .8 1.598l2-.001A4 4 0 0 0 11.4 9.8zm.8 5.066v3.56h2v-3.56zM13 21v-.975h-2V21zm0-4.534v-3.469h-2v3.47zM6 4h6V2H6zm6 0h6V2h-6zm6 16h-6v2h6zm-6 0H6v2h6zM4 6a2 2 0 0 1 2-2V2a4 4 0 0 0-4 4zM2 18a4 4 0 0 0 4 4v-2a2 2 0 0 1-2-2zm18 0a2 2 0 0 1-2 2v2a4 4 0 0 0 4-4zm2-12a4 4 0 0 0-4-4v2a2 2 0 0 1 2 2z\" class=\"icon-dark\"/>"
+}
+}, ["24"], "technology-git-branches"))
+
+
 export const IconTechnologyImageScreenshot: React.FC<
   Omit<iconsRegistry.IconTechnologyImageScreenshotProps, 'name'> & React.SVGProps<SVGSVGElement>
 > = (props) => React.createElement('svg', useIconProps(props, {
@@ -2174,6 +2189,15 @@ export const IconTechnologyPullRequest: React.FC<
 }, ["16"], "technology-pull-request"))
 
 
+export const IconTechnologyServerAlt: React.FC<
+  Omit<iconsRegistry.IconTechnologyServerAltProps, 'name'> & React.SVGProps<SVGSVGElement>
+> = (props) => React.createElement('svg', useIconProps(props, {
+"24": {
+  "body": "<rect width=\"20\" height=\"6\" x=\"2\" y=\"9\" fill=\"#D0D2E0\" class=\"icon-light\" rx=\"2\"/><path fill=\"#1B1E2E\" fill-rule=\"evenodd\" d=\"M1 17a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm3 2a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1m-2 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" class=\"icon-dark\" clip-rule=\"evenodd\"/><path fill=\"#1B1E2E\" fill-rule=\"evenodd\" d=\"M1 11a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm3 2a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1m-2 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" class=\"icon-dark\" clip-rule=\"evenodd\"/><path fill=\"#1B1E2E\" fill-rule=\"evenodd\" d=\"M1 5a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm3 2a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1M5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" class=\"icon-dark\" clip-rule=\"evenodd\"/>"
+}
+}, ["24"], "technology-server-alt"))
+
+
 export const IconTechnologyServer: React.FC<
   Omit<iconsRegistry.IconTechnologyServerProps, 'name'> & React.SVGProps<SVGSVGElement>
 > = (props) => React.createElement('svg', useIconProps(props, {
@@ -2333,6 +2357,15 @@ export const IconViewList: React.FC<
 }, ["16"], "view-list"))
 
 
+export const IconViewPieChartAlt: React.FC<
+  Omit<iconsRegistry.IconViewPieChartAltProps, 'name'> & React.SVGProps<SVGSVGElement>
+> = (props) => React.createElement('svg', useIconProps(props, {
+"24": {
+  "body": "<path fill=\"#D0D2E0\" d=\"M20.97 12.75a9 9 0 0 1-14.782 6.122c-.316-.268-.315-.745-.022-1.038l5.541-5.541a1 1 0 0 1 .707-.293h7.836c.414 0 .753.337.72.75\" class=\"icon-light\"/><path fill=\"#BFC2D4\" d=\"M5.128 17.812A8.96 8.96 0 0 1 3 12a8.97 8.97 0 0 1 2.636-6.364 8.97 8.97 0 0 1 5.615-2.605c.413-.034.749.305.749.719v7.836a1 1 0 0 1-.293.707l-5.54 5.54c-.294.294-.771.295-1.039-.02\" class=\"icon-light-secondary\"/><path fill=\"#9095AD\" d=\"M12 3.75c0-.414.337-.753.75-.72a9 9 0 0 1 8.22 8.22c.033.413-.306.75-.72.75h-7.5a.75.75 0 0 1-.75-.75z\" class=\"icon-dark-secondary\"/><path stroke=\"#1B1E2E\" stroke-width=\"2\" d=\"M21 12a9 9 0 0 1-15.364 6.364M21 12a9 9 0 0 0-9-9m9 9h-9m0-9a9 9 0 0 0-6.364 15.364M12 3v9m0 0-6.364 6.364\" class=\"icon-dark\"/>"
+}
+}, ["24"], "view-pie-chart-alt"))
+
+
 export const IconViewPieChart: React.FC<
   Omit<iconsRegistry.IconViewPieChartProps, 'name'> & React.SVGProps<SVGSVGElement>
 > = (props) => React.createElement('svg', useIconProps(props, {
@@ -2370,3 +2403,15 @@ export const IconWarning: React.FC<
   "body": "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 0a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1\" class=\"icon-dark\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M5 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0\" class=\"icon-dark\"/>"
 }
 }, ["8"], "warning"))
+
+
+export const IconWindowCodeEditor: React.FC<
+  Omit<iconsRegistry.IconWindowCodeEditorProps, 'name'> & React.SVGProps<SVGSVGElement>
+> = (props) => React.createElement('svg', useIconProps(props, {
+"16": {
+  "body": "<path fill=\"#D0D2E0\" fill-rule=\"evenodd\" d=\"M15 3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v1h14z\" class=\"icon-light\" clip-rule=\"evenodd\"/><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M1 4v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4M1 4V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1M1 4h14m-5 4 1.5 1.5L10 11M6 8 4.5 9.5 6 11\" class=\"icon-dark\"/>"
+},
+"24": {
+  "body": "<path fill=\"#D0D2E0\" fill-rule=\"evenodd\" d=\"M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2h18z\" class=\"icon-light\" clip-rule=\"evenodd\"/><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8M3 8V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M3 8h18m-7 4 2 2-2 2m-4-4-2 1.929 2 1.928\" class=\"icon-dark\"/>"
+}
+}, ["16","24"], "window-code-editor"))

package/animated/_IconGeneralChatBubble.cy.tsx

@@ -0,0 +1,6 @@
+import IconGeneralChatBubble from './_IconGeneralChatBubble'
+import { iconTests } from './_testUtils'
+
+describe('<IconGeneralChatBubble />', () => {
+  iconTests(IconGeneralChatBubble)
+})

package/animated/_IconGeneralChatBubble.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { iconGeneralChatBubble } from '@cypress-design/constants-icon'
+import { PathMorpher } from './_Morphers'
+
+const IconGeneralChatBubble: React.FC<
+  React.SVGProps<SVGSVGElement> & { animated: boolean }
+> = ({ animated, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <PathMorpher
+        className="icon-dark"
+        fill="#1B1E2E"
+        {...iconGeneralChatBubble.small}
+        animated={animated}
+      />
+      <PathMorpher
+        className="icon-light"
+        fill="#1B1E2E"
+        {...iconGeneralChatBubble.big}
+        animated={animated}
+      />
+    </svg>
+  )
+}
+
+export default IconGeneralChatBubble

package/animated/_IconObjectGear.cy.tsx

@@ -0,0 +1,6 @@
+import IconObjectGear from './_IconObjectGear'
+import { iconTests } from './_testUtils'
+
+describe('<IconObjectGear />', () => {
+  iconTests(IconObjectGear)
+})

package/animated/_IconObjectGear.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { iconObjectGear } from '@cypress-design/constants-icon'
+import { PathMorpher } from './_Morphers'
+
+const IconObjectGear: React.FC<
+  React.SVGProps<SVGSVGElement> & { animated: boolean }
+> = ({ animated, ...rest }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <PathMorpher
+        fillRule="evenodd"
+        clipRule="evenodd"
+        {...iconObjectGear}
+        fill="#1B1E2E"
+        animated={animated}
+        className="icon-light"
+      />
+      <circle cx="12" cy="12" r="2" fill="#9095AD" className="icon-dark" />
+    </svg>
+  )
+}
+
+export default IconObjectGear

package/animated/_IconTechnologyGitBranches.cy.tsx

@@ -0,0 +1,6 @@
+import IconTechnologyGitBranches from './_IconTechnologyGitBranches'
+import { iconTests } from './_testUtils'
+
+describe('<IconTechnologyGitBranches />', () => {
+  iconTests(IconTechnologyGitBranches)
+})

package/animated/_IconTechnologyGitBranches.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { iconTechnologyGitBranches } from '@cypress-design/constants-icon'
+import { PathMorpher } from './_Morphers'
+
+const IconViewChart: React.FC<
+  React.SVGProps<SVGSVGElement> & { animated: boolean }
+> = ({ animated, ...rest }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <PathMorpher
+        {...iconTechnologyGitBranches.left}
+        fill="#1B1E2E"
+        className="icon-light"
+        animated={animated}
+      />
+      <PathMorpher
+        {...iconTechnologyGitBranches.right}
+        fill="#747994"
+        className="icon-dark"
+        animated={animated}
+      />
+    </svg>
+  )
+}
+
+export default IconViewChart

package/animated/_IconTechnologyServer.cy.tsx

@@ -0,0 +1,6 @@
+import IconTechnologyServer from './_IconTechnologyServer'
+import { iconTests } from './_testUtils'
+
+describe('<IconTechnologyServer />', () => {
+  iconTests(IconTechnologyServer)
+})

package/animated/_IconTechnologyServer.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { iconTechnologyServer } from '@cypress-design/constants-icon'
+import { PathMorpher } from './_Morphers'
+
+const IconTechServer: React.FC<
+  React.SVGProps<SVGSVGElement> & { animated: boolean }
+> = ({ animated, ...rest }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <PathMorpher
+        fillRule="evenodd"
+        clipRule="evenodd"
+        {...iconTechnologyServer.top}
+        animated={animated}
+        fill="#1B1E2E"
+        className="icon-light"
+      />
+      <PathMorpher
+        fillRule="evenodd"
+        clipRule="evenodd"
+        {...iconTechnologyServer.middle}
+        animated={animated}
+        fill="#9095AD"
+        className="icon-dark"
+      />
+
+      <PathMorpher
+        fillRule="evenodd"
+        clipRule="evenodd"
+        {...iconTechnologyServer.bottom}
+        animated={animated}
+        fill="#9095AD"
+        className="icon-dark"
+      />
+    </svg>
+  )
+}
+
+export default IconTechServer

package/animated/_IconViewChart.cy.tsx

@@ -0,0 +1,6 @@
+import IconViewChart from './_IconViewChart'
+import { iconTests } from './_testUtils'
+
+describe('<IconViewChart />', () => {
+  iconTests(IconViewChart)
+})

package/animated/_IconViewChart.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { iconViewChart } from '@cypress-design/constants-icon'
+import { PathMorpher } from './_Morphers'
+
+const IconViewChart: React.FC<
+  React.SVGProps<SVGSVGElement> & { animated: boolean }
+> = ({ animated, ...rest }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <PathMorpher
+        {...iconViewChart.topRight}
+        fill="#AFB3C7"
+        className="icon-light"
+        animated={animated}
+      />
+      <PathMorpher
+        {...iconViewChart.left}
+        fill="#1B1E2E"
+        className="icon-dark-secondary"
+        animated={animated}
+      />
+      <PathMorpher
+        {...iconViewChart.bottom}
+        fill="#747994"
+        className="icon-dark"
+        animated={animated}
+        shapeRendering="geometricPrecision"
+      />
+    </svg>
+  )
+}
+
+export default IconViewChart

package/animated/_Morphers.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+interface PathMorpherProps extends React.SVGProps<SVGPathElement> {
+  d: string
+  dAnimated: string
+  dur?: number
+  animated?: boolean
+}
+
+function useAnimatedEffect(animated: boolean, dur: number) {
+  const [prevAnimated, setPrevAnimated] = React.useState(animated)
+  const animateRef = React.useRef<SVGAnimateTransformElement>(null)
+  React.useEffect(() => {
+    if (prevAnimated === animated) {
+      animateRef.current?.endElement()
+    } else {
+      animateRef.current?.beginElement()
+      setTimeout(() => {
+        setPrevAnimated(animated)
+      }, dur - 30)
+    }
+  })
+  return { prevAnimated, animateRef }
+}
+
+export const PathMorpher: React.FC<PathMorpherProps> = ({
+  d,
+  dAnimated,
+  dur = 150,
+  animated = false,
+
+  ...props
+}) => {
+  const { prevAnimated, animateRef } = useAnimatedEffect(animated, dur)
+
+  return (
+    <path d={prevAnimated ? dAnimated : d} {...props}>
+      <animate
+        ref={animateRef}
+        attributeName="d"
+        dur={`${dur}ms`}
+        repeatCount="1"
+        values={
+          prevAnimated === animated
+            ? undefined
+            : prevAnimated
+              ? [dAnimated, d].join(';')
+              : [d, dAnimated].join(';')
+        }
+        restart="always"
+      />
+    </path>
+  )
+}

package/animated/_testUtils.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { mount } from 'cypress/react18'
+
+export function iconTests(
+  Icon: React.FC<
+    React.SVGProps<SVGSVGElement> & {
+      animated: boolean
+    }
+  >,
+) {
+  it('renders', () => {
+    mount(
+      <Icon
+        animated={false}
+        width={400}
+        height={400}
+        className="icon-dark-secondary-indigo-500 icon-light-indigo-300 icon-dark-indigo-400"
+      />,
+    )
+  })
+
+  it('renders active', () => {
+    const SUT = () => {
+      const [isActive, setIsActive] = React.useState(false)
+      return (
+        <>
+          <pre>{isActive ? 'active' : 'not active'}</pre>
+          <Icon
+            animated={isActive}
+            width={400}
+            height={400}
+            className="icon-dark-secondary-indigo-500 icon-light-indigo-300 icon-dark-indigo-400 m-[50px]"
+            onClick={() => setIsActive(!isActive)}
+          />
+        </>
+      )
+    }
+    mount(<SUT />)
+
+    cy.get('svg').click()
+  })
+
+  it('renders both side by side', { viewportWidth: 900 }, () => {
+    mount(
+      <div className="bg-black flex gap-4 text-center text-2xl">
+        <div>
+          <h2 className="text-indigo-200 drop-shadow-md font-bold">
+            not animated
+          </h2>
+          <Icon
+            animated={false}
+            width={400}
+            height={400}
+            className="icon-dark-secondary-indigo-500 icon-light-indigo-300 icon-dark-indigo-400"
+          />
+        </div>
+        <div>
+          <h2 className="text-indigo-200 drop-shadow-md font-bold">animated</h2>
+          <Icon
+            animated={true}
+            width={400}
+            height={400}
+            className="icon-dark-secondary-indigo-500 icon-light-indigo-300 icon-dark-indigo-400"
+          />
+        </div>
+      </div>,
+    )
+  })
+}

package/animated/index.ts

@@ -0,0 +1,5 @@
+export { default as IconAnimatedGeneralChatBubble } from './_IconGeneralChatBubble'
+export { default as IconAnimatedTechnologyGitBranches } from './_IconTechnologyGitBranches'
+export { default as IconAnimatedTechnologyServer } from './_IconTechnologyServer'
+export { default as IconAnimatedViewChart } from './_IconViewChart'
+export { default as IconAnimatedObjectGear } from './_IconObjectGear'

package/compileProperties.ts

@@ -8,9 +8,11 @@ export const compileReactIconProperties = ({
   compiledClasses,
   size,
   name,
+  alt,
   ...attributes
 }: {
   body: string
+  alt?: string
   defs?: string
   compiledClasses: string[]
   size: string
@@ -60,7 +62,11 @@ export const compileReactIconProperties = ({
     viewBox: `0 0 ${size} ${size}`,
     fill: 'none',
     dangerouslySetInnerHTML: {
-      __html: body,
+      __html: alt
+        ? `<title>${alt.replace(/[><]/g, (s) => {
+            return s === '>' ? '&gt;' : '&lt;'
+          })}</title>${body}`
+        : body,
     },
     className: undefined as string | undefined,
     ...filteredAttributes, // add all standard attributes back to the svg tag

package/dist/_TreeShakableIcons.d.ts

@@ -206,11 +206,13 @@ export declare const IconTechnologyDashboardRunning: React.FC<Omit<iconsRegistry
 export declare const IconTechnologyDollar: React.FC<Omit<iconsRegistry.IconTechnologyDollarProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyDragProject: React.FC<Omit<iconsRegistry.IconTechnologyDragProjectProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyElementSelector: React.FC<Omit<iconsRegistry.IconTechnologyElementSelectorProps, 'name'> & React.SVGProps<SVGSVGElement>>;
+export declare const IconTechnologyGitBranches: React.FC<Omit<iconsRegistry.IconTechnologyGitBranchesProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyImageScreenshot: React.FC<Omit<iconsRegistry.IconTechnologyImageScreenshotProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyInfinityLoop: React.FC<Omit<iconsRegistry.IconTechnologyInfinityLoopProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyLockedProject: React.FC<Omit<iconsRegistry.IconTechnologyLockedProjectProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyOctothorpe: React.FC<Omit<iconsRegistry.IconTechnologyOctothorpeProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyPullRequest: React.FC<Omit<iconsRegistry.IconTechnologyPullRequestProps, 'name'> & React.SVGProps<SVGSVGElement>>;
+export declare const IconTechnologyServerAlt: React.FC<Omit<iconsRegistry.IconTechnologyServerAltProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyServer: React.FC<Omit<iconsRegistry.IconTechnologyServerProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyTerminalLog: React.FC<Omit<iconsRegistry.IconTechnologyTerminalLogProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconTechnologyTerminal: React.FC<Omit<iconsRegistry.IconTechnologyTerminalProps, 'name'> & React.SVGProps<SVGSVGElement>>;
@@ -226,8 +228,10 @@ export declare const IconTimeStopwatch: React.FC<Omit<iconsRegistry.IconTimeStop
 export declare const IconUserGeneralOutline: React.FC<Omit<iconsRegistry.IconUserGeneralOutlineProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconUserGeneralSolid: React.FC<Omit<iconsRegistry.IconUserGeneralSolidProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconViewList: React.FC<Omit<iconsRegistry.IconViewListProps, 'name'> & React.SVGProps<SVGSVGElement>>;
+export declare const IconViewPieChartAlt: React.FC<Omit<iconsRegistry.IconViewPieChartAltProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconViewPieChart: React.FC<Omit<iconsRegistry.IconViewPieChartProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconViewTreeAlt: React.FC<Omit<iconsRegistry.IconViewTreeAltProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconWarningCircle: React.FC<Omit<iconsRegistry.IconWarningCircleProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 export declare const IconWarning: React.FC<Omit<iconsRegistry.IconWarningProps, 'name'> & React.SVGProps<SVGSVGElement>>;
+export declare const IconWindowCodeEditor: React.FC<Omit<iconsRegistry.IconWindowCodeEditorProps, 'name'> & React.SVGProps<SVGSVGElement>>;
 //# sourceMappingURL=_TreeShakableIcons.d.ts.map