blabla

examples/dialog/reportingDialog.tsx

@@ -1,3 +1,4 @@
+import { PencilIcon, PhoneIcon } from '@navikt/aksel-icons';
 import type { DialogProps } from '../../lib';
 import { ssb } from '../avatar';
 
@@ -43,11 +44,11 @@ export const reportingDialog: DialogProps = {
     description: 'Sentralbordet er åpent mandag–fredag 9.00-11.25 og 12–14.',
     items: [
       {
-        icon: 'phone',
+        icon: PhoneIcon,
         label: 'Ring 62 88 50 00',
       },
       {
-        icon: 'pencil',
+        icon: PencilIcon,
         label: 'Skriv til oss',
       },
     ],

examples/dialog/simpleLetterDialog.tsx

@@ -1,3 +1,4 @@
+import { ChatIcon, PencilIcon, PhoneIcon } from '@navikt/aksel-icons';
 import type { DialogProps } from '../../lib';
 import { skatt } from '../avatar';
 
@@ -36,15 +37,15 @@ export const simpleLetterDialog: DialogProps = {
     description: 'Du kan kontakt oss på hverdager mellom 08–16.',
     items: [
       {
-        icon: 'chat',
+        icon: ChatIcon,
         label: 'Chat med oss',
       },
       {
-        icon: 'phone',
+        icon: PhoneIcon,
         label: 'Ring 800 80 000',
       },
       {
-        icon: 'pencil',
+        icon: PencilIcon,
         label: 'Skriv til oss',
       },
     ],

lib/components/Attachment/AttachmentLink.tsx

@@ -1,4 +1,5 @@
-import { Icon, type IconName } from '../Icon';
+import { FileIcon } from '@navikt/aksel-icons';
+import { Icon, type SvgElement } from '../Icon';
 import styles from './attachmentLink.module.css';
 
 export interface AttachmentLinkProps {
@@ -7,13 +8,13 @@ export interface AttachmentLinkProps {
   /** Label (filename) */
   label: string;
   /** Icon */
-  icon?: IconName;
+  icon?: SvgElement;
 }
 
-export const AttachmentLink = ({ icon = 'file', href, label }: AttachmentLinkProps) => {
+export const AttachmentLink = ({ icon = FileIcon, href, label }: AttachmentLinkProps) => {
   return (
     <a href={href} className={styles.link}>
-      <Icon name={icon} className={styles.icon} />
+      <Icon svgElement={icon} altText="" className={styles.icon} />
       <span className={styles.label}>{label}</span>
     </a>
   );

lib/components/Button/Button.tsx

@@ -1,12 +1,13 @@
 import cx from 'classnames';
-import type { IconName } from '../Icon';
+import type { SvgElement } from '../Icon';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
 import { ButtonIcon } from './ButtonIcon';
 import { ButtonLabel } from './ButtonLabel';
 import styles from './button.module.css';
 
 export interface ButtonProps extends Partial<ButtonBaseProps> {
-  icon?: IconName;
+  icon?: SvgElement;
+  iconAltText?: string;
   reverse?: boolean;
   loading?: boolean;
   loadingText?: string;
@@ -26,6 +27,7 @@ export const Button = ({
   className,
   loading,
   loadingText = 'Loading ...',
+  iconAltText,
   ...rest
 }: ButtonProps) => {
   if (loading) {
@@ -58,7 +60,7 @@ export const Button = ({
       className={cx(styles.button, { [styles.reverse]: reverse })}
       {...rest}
     >
-      {icon && <ButtonIcon size={size} icon={icon} />}
+      {icon && <ButtonIcon size={size} icon={icon} iconAltText={iconAltText} />}
       <ButtonLabel size={size}>{children || label}</ButtonLabel>
     </ButtonBase>
   );

lib/components/Button/ButtonIcon.tsx

@@ -1,16 +1,17 @@
-import { Icon, type IconName } from '../Icon';
+import { Icon, type SvgElement } from '../Icon';
 import type { ButtonSize } from './ButtonBase';
 import styles from './buttonIcon.module.css';
 
 export interface ButtonIconProps {
-  icon: IconName;
+  icon: SvgElement;
+  iconAltText?: string;
   size: ButtonSize;
 }
 
-export const ButtonIcon = ({ size, icon }: ButtonIconProps) => {
+export const ButtonIcon = ({ size, icon, iconAltText }: ButtonIconProps) => {
   return (
     <span className={styles.icon} data-size={size}>
-      <Icon name={icon} />
+      <Icon svgElement={icon} altText={iconAltText} />
     </span>
   );
 };

lib/components/Button/Buttons.stories.tsx

@@ -1,3 +1,4 @@
+import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import type { StoryObj } from '@storybook/react';
 import { Button, type ButtonSize, type ButtonVariant, ComboButton, IconButton, MetaItem } from '../';
 
@@ -43,13 +44,13 @@ export const VariantsAndSizes = (args: Story) => {
               return (
                 <div key={size} style={{ display: 'flex', alignItems: 'center', columnGap: '1rem' }}>
                   <IconButton {...args} icon="x-mark" variant={variant} size={size} />
-                  <Button {...args} variant={variant} icon="arrow-left" size={size}>
+                  <Button {...args} variant={variant} icon={ArrowLeftIcon} size={size}>
                     Button
                   </Button>
-                  <Button {...args} reverse variant={variant} icon="arrow-right" size={size}>
+                  <Button {...args} reverse variant={variant} icon={ArrowRightIcon} size={size}>
                     Button
                   </Button>
-                  <ComboButton {...args} variant={variant} icon="chevron-down" size={size}>
+                  <ComboButton {...args} variant={variant} icon={ChevronDownIcon} size={size}>
                     ComboButton
                   </ComboButton>
                   <MetaItem>{size}</MetaItem>

lib/components/Button/ComboButton.stories.ts

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ComboButton } from './ComboButton';
 
@@ -8,7 +9,7 @@ const meta = {
   parameters: {},
   args: {
     children: 'ComboButton',
-    icon: 'chevron-down',
+    icon: ChevronDownIcon,
     size: 'sm',
   },
 } satisfies Meta<typeof ComboButton>;

lib/components/Button/ComboButton.tsx

@@ -1,14 +1,14 @@
 import cx from 'classnames';
 import type { MouseEventHandler } from 'react';
-import type { IconName } from '../Icon';
+import type { SvgElement } from '../Icon';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
 import { ButtonIcon } from './ButtonIcon';
 import { ButtonLabel } from './ButtonLabel';
 
 import styles from './comboButton.module.css';
 
 export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
-  icon: IconName;
+  icon: SvgElement;
   onIconClick?: MouseEventHandler<HTMLButtonElement>;
   onLabelClick?: MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;

lib/components/Icon/Icon.stories.ts

@@ -1,18 +1,14 @@
+import { InboxFillIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon } from './Icon';
-import { iconsMap } from './iconsMap';
 
 const meta: Meta<typeof Icon> = {
   title: 'Atoms/Icon/Icon',
   component: Icon,
   tags: ['autodocs'],
   parameters: {},
-  argTypes: {
-    name: Object.keys(iconsMap),
-  },
   args: {
-    name: 'inbox',
-    variant: 'outline',
+    svgElement: InboxFillIcon,
   },
 } satisfies Meta<typeof Icon>;
 

lib/components/Icon/Icon.tsx

@@ -1,35 +1,33 @@
 import cx from 'classnames';
-import { type Color, type IconName, type Size, Skeleton, type Theme, iconsMap } from '..';
-import { SvgIcon } from './SvgIcon';
+import { type Color, type Size, Skeleton, type Theme } from '..';
 import styles from './icon.module.css';
 
-export type IconVariant = 'solid' | 'outline';
+export type SvgElement = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 export type IconSize = Size | undefined;
 export type IconColor = Color;
 export type IconTheme = Theme;
 
 export interface IconProps {
-  name: IconName;
+  SvgElement: SvgElement | undefined | null;
+  altText?: string;
   loading?: boolean;
   size?: IconSize;
   color?: IconColor;
   theme?: IconTheme;
-  variant?: IconVariant;
   className?: string;
 }
 
-export const Icon = ({ loading, name, size, color, theme, variant = 'outline', className }: IconProps) => {
-  const svgIcon: JSX.Element | undefined =
-    (iconsMap[name] as { [key in IconVariant]: JSX.Element })?.[variant] ?? iconsMap[name]?.outline;
-
-  if (!svgIcon) {
+export const Icon = ({ loading, altText, svgElement: SvgElement, size, color, theme, className }: IconProps) => {
+  if (!SvgElement) {
     return <span className={cx([styles.icon], className)} />;
   }
 
+  const ariaHidden = altText ? undefined : true;
+
   return (
     <Skeleton loading={loading} variant="circle">
       <span data-size={size} data-color={color} data-theme={theme} className={cx([styles.icon], className)}>
-        <SvgIcon svgIconComponent={svgIcon} />
+        <SvgElement aria-hidden={ariaHidden} alt-text={altText} />
       </span>
     </Skeleton>
   );

lib/components/Icon/IconOrAvatar.tsx

@@ -7,10 +7,10 @@ import {
   type AvatarSize,
   type BadgeProps,
   Icon,
-  type IconName,
   type IconProps,
   type IconSize,
   type IconTheme,
+  type SvgElement,
 } from '..';
 
 export type IconOrAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -19,28 +19,35 @@ export type IconOrAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface IconOrAvatarProps {
   size?: IconOrAvatarSize;
-  icon?: IconProps | IconName | ReactNode;
+  icon?: IconProps | SvgElement | ReactNode;
   iconTheme?: IconTheme;
   avatar?: AvatarProps;
   avatarGroup?: AvatarGroupProps;
   badge?: BadgeProps | undefined;
 }
 
+const isSVGElement = (icon: IconProps | SvgElement | ReactNode): icon is SvgElement => {
+  return typeof icon === 'function';
+};
+
 export const IconOrAvatar = ({ size, icon, iconTheme, avatar, avatarGroup }: IconOrAvatarProps) => {
   if (!icon && !avatar && !avatarGroup) {
     return null;
   }
 
-  /** Icon can be custom, a string or an Icon object. */
-
+  /** Icon can be custom, a svg or an Icon object. */
   if (icon) {
+    if (isSVGElement(icon)) {
+      return <Icon SvgElement={icon} theme={iconTheme} size={size as IconSize} />;
+    }
+
     if (isValidElement(icon)) {
       return icon;
     }
 
-    const applicableIcon = typeof icon === 'string' ? ({ name: icon } as IconProps) : (icon as IconProps);
+    const iconProps = icon as IconProps;
 
-    return <Icon {...applicableIcon} theme={applicableIcon?.theme || iconTheme} size={size as IconSize} />;
+    return <Icon {...iconProps} />;
   }
 
   /** Avatar or AvatarGroup */