@synerise/ds-icon 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.11.1...@synerise/ds-icon@1.12.0) (2026-02-10)
+
+### Features
+
+- **mocks:** add base package structure ([f4e5263](https://github.com/Synerise/synerise-design/commit/f4e5263d21675dbb3d040a3efbe84b726e12ddca))
+
+## [1.11.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.11.0...@synerise/ds-icon@1.11.1) (2026-02-05)
+
+**Note:** Version bump only for package @synerise/ds-icon
+
 # [1.11.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.10.1...@synerise/ds-icon@1.11.0) (2026-02-02)
 
 ### Features

package/README.md

@@ -23,25 +23,26 @@ yarn add @synerise/ds-icon
 
 ## Usage
 
-```
-import Icon, { AngleLeftM } from '@synerise/ds-icon'
+```tsx
+import Icon from '@synerise/ds-icon'
 
-<Icon component={<AngleLeftM />
-      color={'red'}
-      title={'customIcon'}
-      size={20}
-      className={'classIcon'}
-/>
+// Recommended: use iconName prop with icon name as string
+<Icon iconName="AngleLeftM" color="red" size={20} />
+
+// Deprecated: using component prop
+import Icon, { AngleLeftM } from '@synerise/ds-icon'
+<Icon component={<AngleLeftM />} color="red" size={20} />
 ```
 
 ## API
 
 | Property  | Description                                                | Type             | Default |
 | --------- | ---------------------------------------------------------- | ---------------- | ------- |
+| iconName  | Icon name as string (recommended)                          | IconName         |         |
 | color     | Define the color used                                      | string           | inherit |
 | title     | Name icon                                                  | string           |         |
 | size      | Define size icon                                           | string or number | 24      |
-| onClick   | The callback function that is triggered when click on icon | fucnction        |         |
-| component | The component used for the root node                       | ReactNode        |         |
+| onClick   | The callback function that is triggered when click on icon | function         |         |
+| component | ⚠️ Deprecated - use `iconName` instead                     | ReactNode        |         |
 | className | icon className                                             | string           |         |
 | style     | Style properties of icon, like color etc.                  | CSSProperties    |         |

package/dist/DynamicIcon/DynamicIcon.d.ts

@@ -1,10 +1,20 @@
 import React, { type ReactNode } from 'react';
 import type { IconProps } from '../Icon.types';
-import { iconManifest } from './iconManifest';
-export type DynamicIconProps = Omit<IconProps, 'component'> & {
-    name: DynamicIconName;
+import { type IconName } from '../useIconComponent';
+export type DynamicIconProps = Omit<IconProps, 'component' | 'iconName'> & {
+    name: IconName;
     fallback?: ReactNode;
 };
-export type DynamicIconName = keyof typeof iconManifest;
-export declare const DynamicIcon: ({ name, fallback, ...props }: DynamicIconProps & {}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
+/**
+ * @deprecated Use `<Icon iconName="IconName" />` instead of `<DynamicIcon name="IconName" />`.
+ * The Icon component now supports dynamic icon loading via the `iconName` prop.
+ * @example
+ * // Before (deprecated):
+ * <DynamicIcon name="InfoM" />
+ *
+ * // After (recommended):
+ * <Icon iconName="InfoM" />
+ */
+export declare const DynamicIcon: ({ name, fallback, ...props }: DynamicIconProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
 export default DynamicIcon;
+export type { IconName as DynamicIconName };

package/dist/DynamicIcon/DynamicIcon.js

@@ -1,27 +1,30 @@
 var _excluded = ["name", "fallback"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo } from 'react';
+import React from 'react';
 import Icon from '../Icon';
-import { iconManifest } from './iconManifest';
+import { useIconComponent } from '../useIconComponent';
+/**
+ * @deprecated Use `<Icon iconName="IconName" />` instead of `<DynamicIcon name="IconName" />`.
+ * The Icon component now supports dynamic icon loading via the `iconName` prop.
+ * @example
+ * // Before (deprecated):
+ * <DynamicIcon name="InfoM" />
+ *
+ * // After (recommended):
+ * <Icon iconName="InfoM" />
+ */
 export var DynamicIcon = function DynamicIcon(_ref) {
   var name = _ref.name,
     _ref$fallback = _ref.fallback,
     fallback = _ref$fallback === void 0 ? null : _ref$fallback,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var IconComponent = useMemo(function () {
-    var iconModule = iconManifest[name];
-    if (!iconModule) {
-      return null;
-    }
-    var component = iconModule[name];
-    return component && typeof component === 'function' ? component : null;
-  }, [name]);
+  var IconComponent = useIconComponent(name);
   if (!IconComponent) {
     return fallback;
   }
   return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
-    component: /*#__PURE__*/React.createElement(IconComponent, null)
+    iconName: name
   }));
 };
 export default DynamicIcon;

package/dist/Icon.js

@@ -1,17 +1,21 @@
-var _excluded = ["name", "component", "className"];
+var _excluded = ["name", "iconName", "component", "className"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef } from 'react';
 import * as S from './Icon.styles';
+import { useIconComponent } from './useIconComponent';
 var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
+    iconName = _ref.iconName,
     component = _ref.component,
     className = _ref.className,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var IconComponent = useIconComponent(iconName);
+  var renderedIcon = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, null) : component;
   return /*#__PURE__*/React.createElement(S.IconContainer, _extends({
     className: "ds-icon " + (className || ''),
-    title: name,
+    title: name || iconName,
     ref: ref
-  }, rest), component);
+  }, rest), renderedIcon);
 });
 export default Icon;

package/dist/Icon.types.d.ts

@@ -1,11 +1,35 @@
 import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { type StyledComponent } from 'styled-components';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import type { IconName } from './useIconComponent';
+export type { IconName };
 export type BaseIconProps = {
     color?: string;
+    /**
+     * Icon name - use this to render an icon by its name (e.g., 'InfoM', 'AddM').
+     * This is the recommended way to use icons.
+     * @example
+     * ```tsx
+     * <Icon iconName="InfoM" />
+     * <Icon iconName="AddM" size={24} color="blue" />
+     * ```
+     */
+    iconName?: IconName;
+    /**
+     * Display name for the icon (used as title attribute)
+     */
     name?: string;
     size?: string | number;
     stroke?: boolean;
+    /**
+     * @deprecated Use the `iconName` prop instead with the icon name as a string.
+     * @example
+     * // Before (deprecated):
+     * <Icon component={<InfoM />} />
+     *
+     * // After (recommended):
+     * <Icon iconName="InfoM" />
+     */
     component?: ReactNode;
 };
 export type IconProps = WithHTMLAttributes<HTMLDivElement, BaseIconProps>;

package/dist/MimeTypeIcon/MimeTypeIcon.js

@@ -3,15 +3,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useMemo } from 'react';
 import Icon from '../Icon';
-import { mapMimeTypeToIcon } from './MimeTypeIcon.utils';
+import { mapMimeTypeToIconName } from './MimeTypeIcon.utils';
 var MimeTypeIcon = function MimeTypeIcon(_ref) {
   var type = _ref.type,
     iconProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var component = useMemo(function () {
-    return mapMimeTypeToIcon(type);
+  var iconName = useMemo(function () {
+    return mapMimeTypeToIconName(type);
   }, [type]);
   return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-    component: component
+    iconName: iconName
   }));
 };
 export default MimeTypeIcon;

package/dist/MimeTypeIcon/MimeTypeIcon.utils.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const mapMimeTypeToIcon: (mimeType: string) => React.JSX.Element;
+import type { IconName } from '../useIconComponent';
+export declare const mapMimeTypeToIconName: (mimeType: string) => IconName;

package/dist/MimeTypeIcon/MimeTypeIcon.utils.js

@@ -1,41 +1,39 @@
-import React from 'react';
-import { FileActionM, FileArchiveM, FileCodeM, FileM, FileTypeImageM, FileTypePlainM, FileTypeTableM, FileTypeTextM } from '../icons/M';
-export var mapMimeTypeToIcon = function mapMimeTypeToIcon(mimeType) {
+export var mapMimeTypeToIconName = function mapMimeTypeToIconName(mimeType) {
   switch (mimeType) {
     case 'text/csv':
-      return /*#__PURE__*/React.createElement(FileTypeTableM, null);
+      return 'FileTypeTableM';
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      return /*#__PURE__*/React.createElement(FileTypeTextM, null);
+      return 'FileTypeTextM';
     case 'text/html':
-      return /*#__PURE__*/React.createElement(FileCodeM, null);
+      return 'FileCodeM';
     case 'audio/mp3':
     case 'audio/mpeg3':
-      return /*#__PURE__*/React.createElement(FileActionM, null);
+      return 'FileActionM';
     case 'application/pdf':
-      return /*#__PURE__*/React.createElement(FileTypeImageM, null);
+      return 'FileTypeImageM';
     case 'application/mspowerpoint':
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-      return /*#__PURE__*/React.createElement(FileTypePlainM, null);
+      return 'FileTypePlainM';
     case 'image/svg':
-      return /*#__PURE__*/React.createElement(FileTypeImageM, null);
+      return 'FileTypeImageM';
     case 'text/plain':
-      return /*#__PURE__*/React.createElement(FileTypeTextM, null);
+      return 'FileTypeTextM';
     case 'video/avi':
     case 'video/quicktime':
     case 'video/mpeg':
-      return /*#__PURE__*/React.createElement(FileActionM, null);
+      return 'FileActionM';
     case 'application/excel':
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return /*#__PURE__*/React.createElement(FileTypeTableM, null);
+      return 'FileTypeTableM';
     case 'application/zip':
     case 'multipart/x-zip':
     case 'application/x-compressed':
     case 'application/x-zip-compressed':
-      return /*#__PURE__*/React.createElement(FileArchiveM, null);
+      return 'FileArchiveM';
     default:
-      return /*#__PURE__*/React.createElement(FileM, null);
+      return 'FileM';
   }
 };

package/dist/icons/L/index.d.ts

@@ -1,70 +1,70 @@
-export { default as TooltipL } from './TooltipL';
 export { default as WarningL } from './WarningL';
-export { default as VideoL } from './VideoL';
-export { default as TextareaL } from './TextareaL';
-export { default as StackedL } from './StackedL';
 export { default as TableL } from './TableL';
-export { default as ShowL } from './ShowL';
-export { default as SelectL } from './SelectL';
-export { default as Section37L } from './Section37L';
-export { default as Section12L } from './Section12L';
+export { default as TooltipL } from './TooltipL';
+export { default as TimeL } from './TimeL';
+export { default as StackedL } from './StackedL';
+export { default as SpinnerL } from './SpinnerL';
 export { default as TextL } from './TextL';
+export { default as ShowL } from './ShowL';
+export { default as SliderL } from './SliderL';
+export { default as TextareaL } from './TextareaL';
 export { default as SectionL } from './SectionL';
+export { default as SelectL } from './SelectL';
 export { default as Section13L } from './Section13L';
 export { default as RelationOneOneL } from './RelationOneOneL';
+export { default as Section37L } from './Section37L';
+export { default as SearchNoResultsL } from './SearchNoResultsL';
+export { default as Section12L } from './Section12L';
 export { default as RelationOneManyL } from './RelationOneManyL';
-export { default as TimeL } from './TimeL';
 export { default as RelationManyOneL } from './RelationManyOneL';
-export { default as RadioL } from './RadioL';
-export { default as SpinnerL } from './SpinnerL';
-export { default as SearchNoResultsL } from './SearchNoResultsL';
-export { default as SliderL } from './SliderL';
-export { default as PieL } from './PieL';
-export { default as QuoteL } from './QuoteL';
+export { default as NoPermissionL } from './NoPermissionL';
+export { default as RelationManyManyL } from './RelationManyManyL';
 export { default as NoData } from './NoData';
-export { default as MobileLinkL } from './MobileLinkL';
+export { default as RadioL } from './RadioL';
+export { default as NavbarL } from './NavbarL';
 export { default as MultilineL } from './MultilineL';
-export { default as RelationManyManyL } from './RelationManyManyL';
-export { default as NoPermissionL } from './NoPermissionL';
+export { default as MobileUrlL } from './MobileUrlL';
+export { default as PieL } from './PieL';
+export { default as MobileLayout4L } from './MobileLayout4L';
 export { default as MobileLayout3L } from './MobileLayout3L';
+export { default as MobileLinkL } from './MobileLinkL';
+export { default as QuoteL } from './QuoteL';
+export { default as VideoL } from './VideoL';
 export { default as MobileLayout2L } from './MobileLayout2L';
-export { default as MobileUrlL } from './MobileUrlL';
 export { default as MobileLayout1L } from './MobileLayout1L';
 export { default as MobileBlockL } from './MobileBlockL';
-export { default as MobileClickL } from './MobileClickL';
-export { default as MobileLayout4L } from './MobileLayout4L';
-export { default as NavbarL } from './NavbarL';
 export { default as LineL } from './LineL';
-export { default as LocationL } from './LocationL';
+export { default as MobileClickL } from './MobileClickL';
+export { default as LabelL } from './LabelL';
+export { default as LinkL } from './LinkL';
 export { default as LandingPageL } from './LandingPageL';
-export { default as InputL } from './InputL';
+export { default as ImagePotraitL } from './ImagePotraitL';
+export { default as LocationL } from './LocationL';
 export { default as InfoL } from './InfoL';
-export { default as LinkL } from './LinkL';
+export { default as InputL } from './InputL';
+export { default as ImageUrlL } from './ImageUrlL';
+export { default as ImageLandscapeL } from './ImageLandscapeL';
 export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
-export { default as LabelL } from './LabelL';
 export { default as InboxNoResultsL } from './InboxNoResultsL';
-export { default as ImageUrlL } from './ImageUrlL';
-export { default as ImagePotraitL } from './ImagePotraitL';
 export { default as ImageL } from './ImageL';
-export { default as ImageLandscapeL } from './ImageLandscapeL';
-export { default as HashL } from './HashL';
 export { default as HideL } from './HideL';
+export { default as HashL } from './HashL';
 export { default as FormL } from './FormL';
 export { default as FormEditL } from './FormEditL';
-export { default as FolderPlainL } from './FolderPlainL';
+export { default as FormGroupL } from './FormGroupL';
 export { default as FolderPredefinedL } from './FolderPredefinedL';
-export { default as FileTypePictureL } from './FileTypePictureL';
+export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderL } from './FolderL';
-export { default as FormGroupL } from './FormGroupL';
-export { default as CountdownL } from './CountdownL';
-export { default as ColumnL } from './ColumnL';
 export { default as ComboL } from './ComboL';
+export { default as FileTypePictureL } from './FileTypePictureL';
 export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
+export { default as DividerL } from './DividerL';
+export { default as ColumnL } from './ColumnL';
+export { default as CountdownL } from './CountdownL';
 export { default as CloseL } from './CloseL';
+export { default as ButtonSubmitL } from './ButtonSubmitL';
 export { default as CheckL } from './CheckL';
-export { default as CheckboxL } from './CheckboxL';
 export { default as BrowserL } from './BrowserL';
+export { default as CheckboxL } from './CheckboxL';
 export { default as ButtonL } from './ButtonL';
-export { default as ButtonSubmitL } from './ButtonSubmitL';
-export { default as DividerL } from './DividerL';
 export { default as AddL } from './AddL';

package/dist/icons/L/index.js

@@ -1,70 +1,70 @@
-export { default as TooltipL } from './TooltipL';
 export { default as WarningL } from './WarningL';
-export { default as VideoL } from './VideoL';
-export { default as TextareaL } from './TextareaL';
-export { default as StackedL } from './StackedL';
 export { default as TableL } from './TableL';
-export { default as ShowL } from './ShowL';
-export { default as SelectL } from './SelectL';
-export { default as Section37L } from './Section37L';
-export { default as Section12L } from './Section12L';
+export { default as TooltipL } from './TooltipL';
+export { default as TimeL } from './TimeL';
+export { default as StackedL } from './StackedL';
+export { default as SpinnerL } from './SpinnerL';
 export { default as TextL } from './TextL';
+export { default as ShowL } from './ShowL';
+export { default as SliderL } from './SliderL';
+export { default as TextareaL } from './TextareaL';
 export { default as SectionL } from './SectionL';
+export { default as SelectL } from './SelectL';
 export { default as Section13L } from './Section13L';
 export { default as RelationOneOneL } from './RelationOneOneL';
+export { default as Section37L } from './Section37L';
+export { default as SearchNoResultsL } from './SearchNoResultsL';
+export { default as Section12L } from './Section12L';
 export { default as RelationOneManyL } from './RelationOneManyL';
-export { default as TimeL } from './TimeL';
 export { default as RelationManyOneL } from './RelationManyOneL';
-export { default as RadioL } from './RadioL';
-export { default as SpinnerL } from './SpinnerL';
-export { default as SearchNoResultsL } from './SearchNoResultsL';
-export { default as SliderL } from './SliderL';
-export { default as PieL } from './PieL';
-export { default as QuoteL } from './QuoteL';
+export { default as NoPermissionL } from './NoPermissionL';
+export { default as RelationManyManyL } from './RelationManyManyL';
 export { default as NoData } from './NoData';
-export { default as MobileLinkL } from './MobileLinkL';
+export { default as RadioL } from './RadioL';
+export { default as NavbarL } from './NavbarL';
 export { default as MultilineL } from './MultilineL';
-export { default as RelationManyManyL } from './RelationManyManyL';
-export { default as NoPermissionL } from './NoPermissionL';
+export { default as MobileUrlL } from './MobileUrlL';
+export { default as PieL } from './PieL';
+export { default as MobileLayout4L } from './MobileLayout4L';
 export { default as MobileLayout3L } from './MobileLayout3L';
+export { default as MobileLinkL } from './MobileLinkL';
+export { default as QuoteL } from './QuoteL';
+export { default as VideoL } from './VideoL';
 export { default as MobileLayout2L } from './MobileLayout2L';
-export { default as MobileUrlL } from './MobileUrlL';
 export { default as MobileLayout1L } from './MobileLayout1L';
 export { default as MobileBlockL } from './MobileBlockL';
-export { default as MobileClickL } from './MobileClickL';
-export { default as MobileLayout4L } from './MobileLayout4L';
-export { default as NavbarL } from './NavbarL';
 export { default as LineL } from './LineL';
-export { default as LocationL } from './LocationL';
+export { default as MobileClickL } from './MobileClickL';
+export { default as LabelL } from './LabelL';
+export { default as LinkL } from './LinkL';
 export { default as LandingPageL } from './LandingPageL';
-export { default as InputL } from './InputL';
+export { default as ImagePotraitL } from './ImagePotraitL';
+export { default as LocationL } from './LocationL';
 export { default as InfoL } from './InfoL';
-export { default as LinkL } from './LinkL';
+export { default as InputL } from './InputL';
+export { default as ImageUrlL } from './ImageUrlL';
+export { default as ImageLandscapeL } from './ImageLandscapeL';
 export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
-export { default as LabelL } from './LabelL';
 export { default as InboxNoResultsL } from './InboxNoResultsL';
-export { default as ImageUrlL } from './ImageUrlL';
-export { default as ImagePotraitL } from './ImagePotraitL';
 export { default as ImageL } from './ImageL';
-export { default as ImageLandscapeL } from './ImageLandscapeL';
-export { default as HashL } from './HashL';
 export { default as HideL } from './HideL';
+export { default as HashL } from './HashL';
 export { default as FormL } from './FormL';
 export { default as FormEditL } from './FormEditL';
-export { default as FolderPlainL } from './FolderPlainL';
+export { default as FormGroupL } from './FormGroupL';
 export { default as FolderPredefinedL } from './FolderPredefinedL';
-export { default as FileTypePictureL } from './FileTypePictureL';
+export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderL } from './FolderL';
-export { default as FormGroupL } from './FormGroupL';
-export { default as CountdownL } from './CountdownL';
-export { default as ColumnL } from './ColumnL';
 export { default as ComboL } from './ComboL';
+export { default as FileTypePictureL } from './FileTypePictureL';
 export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
+export { default as DividerL } from './DividerL';
+export { default as ColumnL } from './ColumnL';
+export { default as CountdownL } from './CountdownL';
 export { default as CloseL } from './CloseL';
+export { default as ButtonSubmitL } from './ButtonSubmitL';
 export { default as CheckL } from './CheckL';
-export { default as CheckboxL } from './CheckboxL';
 export { default as BrowserL } from './BrowserL';
+export { default as CheckboxL } from './CheckboxL';
 export { default as ButtonL } from './ButtonL';
-export { default as ButtonSubmitL } from './ButtonSubmitL';
-export { default as DividerL } from './DividerL';
 export { default as AddL } from './AddL';