@frontify/fondue-icons 0.27.0 → 0.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/createFondueIcon.d.ts +3 -2
- package/dist/fondue-icons2.js.map +1 -1
- package/package.json +15 -15
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { ForwardRefExoticComponent,
|
|
2
|
-
export type
|
|
1
|
+
import { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
|
|
2
|
+
export type SVGElementTagName = 'animate' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
|
|
3
|
+
export type IconNode = [elementName: SVGElementTagName, attrs: Record<string, string>, children?: IconNode][];
|
|
3
4
|
export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
|
|
4
5
|
type ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
|
|
5
6
|
type IconSizeAsNumber = 8 | 12 | 16 | 20 | 24 | 32;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-icons2.js","sources":["../src/createFondueIcon.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {
|
|
1
|
+
{"version":3,"file":"fondue-icons2.js","sources":["../src/createFondueIcon.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createElement, forwardRef, type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from 'react';\n\nimport { defaultAttributes } from './constants';\nimport styles from './icons.module.scss';\nimport { htmlKeysToJsxKeys } from './utilities/jsxKeyFormat';\nimport { kebabCase } from './utilities/stringCasing';\n\n// Mirrors `SVGElementType` from @types/react@19, defined locally so the emitted\n// declarations stay compatible with both @types/react@18 and @types/react@19.\n// Because the type is exported we cannot use the modern SVGElementTagName type directly\n// When the icon pipeline is refactored we can remove this type and use the modern SVGElementTagName type directly.\nexport type SVGElementTagName =\n | 'animate'\n | 'circle'\n | 'clipPath'\n | 'defs'\n | 'desc'\n | 'ellipse'\n | 'feBlend'\n | 'feColorMatrix'\n | 'feComponentTransfer'\n | 'feComposite'\n | 'feConvolveMatrix'\n | 'feDiffuseLighting'\n | 'feDisplacementMap'\n | 'feDistantLight'\n | 'feDropShadow'\n | 'feFlood'\n | 'feFuncA'\n | 'feFuncB'\n | 'feFuncG'\n | 'feFuncR'\n | 'feGaussianBlur'\n | 'feImage'\n | 'feMerge'\n | 'feMergeNode'\n | 'feMorphology'\n | 'feOffset'\n | 'fePointLight'\n | 'feSpecularLighting'\n | 'feSpotLight'\n | 'feTile'\n | 'feTurbulence'\n | 'filter'\n | 'foreignObject'\n | 'g'\n | 'image'\n | 'line'\n | 'linearGradient'\n | 'marker'\n | 'mask'\n | 'metadata'\n | 'path'\n | 'pattern'\n | 'polygon'\n | 'polyline'\n | 'radialGradient'\n | 'rect'\n | 'stop'\n | 'svg'\n | 'switch'\n | 'symbol'\n | 'text'\n | 'textPath'\n | 'tspan'\n | 'use'\n | 'view';\n\nexport type IconNode = [elementName: SVGElementTagName, attrs: Record<string, string>, children?: IconNode][];\n\nexport type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;\ntype ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;\n\ntype IconSizeAsNumber = 8 | 12 | 16 | 20 | 24 | 32;\n\n/**\n * @deprecated Use a string or number instead\n */\nexport enum IconSize {\n Size8 = 'Size8',\n Size12 = 'Size12',\n Size16 = 'Size16',\n Size20 = 'Size20',\n Size24 = 'Size24',\n Size32 = 'Size32',\n}\n\nexport type FondueIconProps = ComponentAttributes & {\n size?: `${IconSizeAsNumber}` | IconSizeAsNumber | IconSize;\n};\n\nexport type FondueIcon = ForwardRefExoticComponent<FondueIconProps>;\n\nconst iconSizeToNumber: Record<Exclude<FondueIconProps['size'], undefined>, IconSizeAsNumber> = {\n [IconSize.Size8]: 8,\n [IconSize.Size12]: 12,\n [IconSize.Size16]: 16,\n [IconSize.Size20]: 20,\n [IconSize.Size24]: 24,\n [IconSize.Size32]: 32,\n 8: 8,\n 12: 12,\n 16: 16,\n 20: 20,\n 24: 24,\n 32: 32,\n};\n\nconst renderIconNode = (iconNode: IconNode, iconName: string): ReturnType<typeof createElement>[] => {\n return iconNode.map(([tagName, attributes, children]) =>\n createElement(\n tagName,\n {\n key: `${iconName}-${tagName}`,\n ...(attributes ? htmlKeysToJsxKeys(attributes) : {}),\n },\n Array.isArray(children) && children.length > 0\n ? children.map((item) => renderIconNode([item], `${iconName}-${tagName}`))\n : [],\n ),\n );\n};\n\nexport const createFondueIcon = (iconName: string, iconNode: IconNode): FondueIcon => {\n const Component = forwardRef<SVGSVGElement, FondueIconProps>(\n ({ color = 'currentColor', size = 24, className = '', children, ...rest }, ref) => {\n return createElement(\n 'svg',\n {\n ref,\n ...defaultAttributes,\n color,\n width: iconSizeToNumber[size],\n height: iconSizeToNumber[size],\n className: ['fondue', styles.fondue, `fondue-${kebabCase(iconName)}`, className]\n .filter(Boolean)\n .join(' '),\n 'data-test-id': `fondue-icons-${kebabCase(iconName)}`,\n key: `fondue-icons-${kebabCase(iconName)}`,\n ...rest,\n },\n [\n ...renderIconNode(iconNode, kebabCase(iconName)),\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n ...(Array.isArray(children) ? children : [children]),\n ],\n );\n },\n );\n\n Component.displayName = `Icon${iconName}`;\n\n return Component;\n};\n"],"names":["IconSize","iconSizeToNumber","renderIconNode","iconNode","iconName","tagName","attributes","children","createElement","htmlKeysToJsxKeys","item","createFondueIcon","Component","forwardRef","color","size","className","rest","ref","defaultAttributes","styles","kebabCase"],"mappings":";;;;;AAgFO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,SAAS,UANDA,IAAAA,KAAA,CAAA,CAAA;AAeZ,MAAMC,IAA0F;AAAA,EAC3F,OAAiB;AAAA,EACjB,QAAkB;AAAA,EAClB,QAAkB;AAAA,EAClB,QAAkB;AAAA,EAClB,QAAkB;AAAA,EAClB,QAAkB;AAAA,EACnB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR,GAEMC,IAAiB,CAACC,GAAoBC,MACjCD,EAAS;AAAA,EAAI,CAAC,CAACE,GAASC,GAAYC,CAAQ,MAC/CC;AAAA,IACIH;AAAA,IACA;AAAA,MACI,KAAK,GAAGD,CAAQ,IAAIC,CAAO;AAAA,MAC3B,GAAIC,IAAaG,EAAkBH,CAAU,IAAI,CAAA;AAAA,IAAC;AAAA,IAEtD,MAAM,QAAQC,CAAQ,KAAKA,EAAS,SAAS,IACvCA,EAAS,IAAI,CAACG,MAASR,EAAe,CAACQ,CAAI,GAAG,GAAGN,CAAQ,IAAIC,CAAO,EAAE,CAAC,IACvE,CAAA;AAAA,EAAC;AACX,GAIKM,IAAmB,CAACP,GAAkBD,MAAmC;AAClF,QAAMS,IAAYC;AAAA,IACd,CAAC,EAAE,OAAAC,IAAQ,gBAAgB,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,UAAAT,GAAU,GAAGU,EAAA,GAAQC,MAChEV;AAAA,MACH;AAAA,MACA;AAAA,QACI,KAAAU;AAAA,QACA,GAAGC;AAAA,QACH,OAAAL;AAAA,QACA,OAAOb,EAAiBc,CAAI;AAAA,QAC5B,QAAQd,EAAiBc,CAAI;AAAA,QAC7B,WAAW,CAAC,UAAUK,EAAO,QAAQ,UAAUC,EAAUjB,CAAQ,CAAC,IAAIY,CAAS,EAC1E,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,gBAAgB,gBAAgBK,EAAUjB,CAAQ,CAAC;AAAA,QACnD,KAAK,gBAAgBiB,EAAUjB,CAAQ,CAAC;AAAA,QACxC,GAAGa;AAAA,MAAA;AAAA,MAEP;AAAA,QACI,GAAGf,EAAeC,GAAUkB,EAAUjB,CAAQ,CAAC;AAAA;AAAA,QAE/C,GAAI,MAAM,QAAQG,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AAAA,MAAA;AAAA,IACtD;AAAA,EAER;AAGJ,SAAAK,EAAU,cAAc,OAAOR,CAAQ,IAEhCQ;AACX;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frontify/fondue-icons",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.27.
|
|
4
|
+
"version": "0.27.1",
|
|
5
5
|
"description": "Frontify's icon SVGs",
|
|
6
6
|
"homepage": "https://github.com/Frontify/fondue",
|
|
7
7
|
"repository": {
|
|
@@ -39,40 +39,40 @@
|
|
|
39
39
|
"react": "^18"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@frontify/fondue-tokens": "^5.1.
|
|
42
|
+
"@frontify/fondue-tokens": "^5.1.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@babel/core": "^7.29.
|
|
45
|
+
"@babel/core": "^7.29.7",
|
|
46
46
|
"@etchteam/storybook-addon-status": "^8.1.0",
|
|
47
47
|
"@frontify/oxfmt-config": "^0.0.2",
|
|
48
48
|
"@frontify/oxlint-config-basic": "^0.0.2",
|
|
49
49
|
"@frontify/oxlint-config-react": "^0.0.2",
|
|
50
50
|
"@iconify/tools": "^4.2.0",
|
|
51
|
-
"@storybook/addon-a11y": "^10.
|
|
52
|
-
"@storybook/addon-docs": "^10.
|
|
53
|
-
"@storybook/addon-links": "^10.
|
|
54
|
-
"@storybook/react-vite": "^10.
|
|
51
|
+
"@storybook/addon-a11y": "^10.5.7",
|
|
52
|
+
"@storybook/addon-docs": "^10.5.7",
|
|
53
|
+
"@storybook/addon-links": "^10.5.7",
|
|
54
|
+
"@storybook/react-vite": "^10.5.7",
|
|
55
55
|
"@tony.ganchev/eslint-plugin-header": "^3.4.4",
|
|
56
56
|
"@types/lodash-es": "^4.17.12",
|
|
57
|
-
"@types/node": "^24.
|
|
58
|
-
"@types/react": "^18.3.
|
|
57
|
+
"@types/node": "^24.13.3",
|
|
58
|
+
"@types/react": "^18.3.31",
|
|
59
59
|
"@typescript/native-preview": "7.0.0-dev.20260421.2",
|
|
60
60
|
"@vitejs/plugin-react": "^4.7.0",
|
|
61
|
-
"autoprefixer": "^10.5.
|
|
61
|
+
"autoprefixer": "^10.5.4",
|
|
62
62
|
"dotenv-cli": "^11.0.0",
|
|
63
|
-
"eslint-plugin-tailwindcss": "^3.18.
|
|
63
|
+
"eslint-plugin-tailwindcss": "^3.18.3",
|
|
64
64
|
"figma-api": "^1.12.0",
|
|
65
|
-
"fuzzysort": "^
|
|
65
|
+
"fuzzysort": "^4.0.0",
|
|
66
66
|
"lodash-es": "^4.18.1",
|
|
67
67
|
"oxfmt": "^0.52.0",
|
|
68
68
|
"oxlint": "^1.67.0",
|
|
69
69
|
"oxlint-tsgolint": "^0.23.0",
|
|
70
|
-
"postcss": "^8.5.
|
|
70
|
+
"postcss": "^8.5.26",
|
|
71
71
|
"react": "^18.3.1",
|
|
72
|
-
"storybook": "^10.
|
|
72
|
+
"storybook": "^10.5.7",
|
|
73
73
|
"svgson": "^5.3.1",
|
|
74
74
|
"tailwindcss": "^3.4.19",
|
|
75
|
-
"tsx": "^4.
|
|
75
|
+
"tsx": "^4.23.11",
|
|
76
76
|
"typescript": "^5.9.3",
|
|
77
77
|
"vite": "^5.4.21",
|
|
78
78
|
"vite-plugin-dts": "^4.5.4",
|