Bytter ut ikonene i alle komponenter

component-overview/examples/buttons/ActionButton-leftIcon.jsx

@@ -1,11 +1,11 @@
 import { ActionButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { HakeIkon } from '@sb1/ffe-icons-react';
+
 <>
     <ButtonGroup thin={true}>
         <ActionButton
             onClick={f => f}
             ariaLoadingMessage="Vennligst vent..."
-            leftIcon={<HakeIkon />}
+            leftIcon="check"
         >
             Bekreft
         </ActionButton>

component-overview/examples/buttons/ActionButton-rightIcon.jsx

@@ -1,11 +1,11 @@
 import { ActionButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { HakeIkon } from '@sb1/ffe-icons-react';
+
 <>
     <ButtonGroup thin={true}>
         <ActionButton
             onClick={f => f}
             ariaLoadingMessage="Vennligst vent..."
-            rightIcon={<HakeIkon />}
+            rightIcon="check"
         >
             Bekreft
         </ActionButton>

component-overview/examples/buttons/PrimaryButton-leftIcon.jsx

@@ -1,6 +1,5 @@
 import { PrimaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { HakeIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
-    <PrimaryButton  leftIcon={<HakeIkon />} onClick={f => f}>Primary knapp</PrimaryButton>
+    <PrimaryButton leftIcon='check' onClick={f => f}>Primary knapp</PrimaryButton>
 </ButtonGroup>;

component-overview/examples/buttons/PrimaryButton-rightIcon.jsx

@@ -1,6 +1,5 @@
 import { PrimaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { HakeIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
-    <PrimaryButton  rightIcon={<HakeIkon />} onClick={f => f}>Primary knapp</PrimaryButton>
+    <PrimaryButton  rightIcon="check" onClick={f => f}>Primary knapp</PrimaryButton>
 </ButtonGroup>;

component-overview/examples/buttons/SecondaryButton-leftIcon.jsx

@@ -1,8 +1,7 @@
 import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { BindersIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
-    <SecondaryButton leftIcon={<BindersIkon />} onClick={f => f}>
+    <SecondaryButton leftIcon="attach_file" onClick={f => f}>
         Secondary m/ ikon
     </SecondaryButton>
 </ButtonGroup>;

component-overview/examples/buttons/SecondaryButton-rightIcon.jsx

@@ -1,8 +1,7 @@
 import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { BindersIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
-    <SecondaryButton rightIcon={<BindersIkon />} onClick={f => f}>
+    <SecondaryButton rightIcon="attach_file" onClick={f => f}>
         Secondary m/ ikon
     </SecondaryButton>
 </ButtonGroup>;

component-overview/examples/buttons/SecondaryButton.jsx

@@ -1,9 +1,8 @@
 import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { BindersIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
     <SecondaryButton onClick={f => f}>Secondary knapp</SecondaryButton>
-    <SecondaryButton leftIcon={<BindersIkon />} onClick={f => f}>
+    <SecondaryButton leftIcon="attach_file" onClick={f => f}>
         Secondary m/ ikon
     </SecondaryButton>
     <SecondaryButton

component-overview/examples/buttons/TaskButton.jsx

@@ -1,6 +1,5 @@
 import { TaskButton, ButtonGroup } from '@sb1/ffe-buttons-react';
-import { PlussIkon } from '@sb1/ffe-icons-react';
 
 <ButtonGroup thin={true}>
-    <TaskButton icon={<PlussIkon />}>Legg til bruker</TaskButton>
+    <TaskButton icon="add">Legg til bruker</TaskButton>
 </ButtonGroup>

component-overview/examples/buttons/TertiaryButton-withicons.jsx

@@ -0,0 +1,7 @@
+import { TertiaryButton, ButtonGroup } from '@sb1/ffe-buttons-react';
+
+<ButtonGroup thin={true}>
+    <TertiaryButton onClick={f => f}>Tertiærknapp</TertiaryButton>
+    <TertiaryButton rightIcon="check" onClick={f => f}>Tertiærknapp</TertiaryButton>
+    <TertiaryButton leftIcon="check" onClick={f => f}>Tertiærknapp</TertiaryButton>
+</ButtonGroup>

component-overview/examples/cards/IconCard-condensed.jsx

@@ -1,7 +1,7 @@
 import { IconCard } from '@sb1/ffe-cards-react';
-import { SparegrisIkon } from '@sb1/ffe-icons-react';
+import Symbol from "@sb1/ffe-symbols-react";
 
-<IconCard href="https://design.sparebank1.no" icon={<SparegrisIkon />} condensed={true}>
+<IconCard href="https://design.sparebank1.no" icon={<Symbol ariaLabel={null}>savings</Symbol>} condensed={true}>
     {({ Title, Subtext }) => (
         <>
             <Title>Sparekonto voksen 25</Title>

component-overview/examples/cards/IconCard.jsx

@@ -1,7 +1,7 @@
 import { IconCard } from '@sb1/ffe-cards-react';
-import { GrafOppIkon } from '@sb1/ffe-icons-react';
+import Symbol from "@sb1/ffe-symbols-react";
 
-<IconCard href="https://design.sparebank1.no" icon={<GrafOppIkon />}>
+<IconCard href="https://design.sparebank1.no" icon={<Symbol ariaLabel={null}>savings</Symbol>}>
     {({ CardName, Title, Subtext, Text }) => (
         <>
             <CardName>Kortnavn</CardName>

component-overview/examples/cards/StippledCard-condensed.jsx

@@ -1,7 +1,7 @@
 import { StippledCard } from '@sb1/ffe-cards-react';
-import { GrafOppIkon } from '@sb1/ffe-icons-react';
+import Symbol from '@sb1/ffe-symbols-react';
 
-<StippledCard href="https://design.sparebank1.no" img={{ type: 'icon', element: <GrafOppIkon  /> } } condensed={true}>
+<StippledCard href="https://design.sparebank1.no" img={{ type: 'icon', element: <Symbol ariaLabel={null}>monitoring</Symbol> } } condensed={true}>
     {({ Title, Subtext }) => (
         <>
             <Title>Sparekonto voksen 25</Title>

component-overview/examples/cards/StippledCard.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StippledCard } from '@sb1/ffe-cards-react';
-import { GrafOppIkon } from '@sb1/ffe-icons-react';
+import Symbol from '@sb1/ffe-symbols-react';
 
 
 <div>
@@ -19,7 +19,7 @@ import { GrafOppIkon } from '@sb1/ffe-icons-react';
             </>
         )}
     </StippledCard>
-    <StippledCard href="https://design.sparebank1.no" img={{ type: 'icon', element: <GrafOppIkon  /> } }>
+    <StippledCard href="https://design.sparebank1.no" img={{ type: 'icon', element: <Symbol ariaLabel={true}>monitoring</Symbol> } }>
         {({ CardName, Title, Subtext, Text }) => (
             <>
                 <CardName>CardName</CardName>

packages/ffe-accordion-react/package.json

@@ -26,7 +26,7 @@
     "dependencies": {
         "@sb1/ffe-accordion": "^9.1.0",
         "@sb1/ffe-collapse-react": "^2.0.4",
-        "@sb1/ffe-icons-react": "^7.3.5",
+        "@sb1/ffe-symbols-react": "^2.0.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2",
         "uuid": "^9.0.0"

packages/ffe-accordion-react/src/AccordionItem.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { bool, func, node, string } from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { ChevronIkon } from '@sb1/ffe-icons-react';
+import Symbol from '@sb1/ffe-symbols-react';
 import Collapse from '@sb1/ffe-collapse-react';
 import classNames from 'classnames';
 
@@ -71,10 +71,13 @@ const AccordionItem = ({
                     <span className="ffe-accordion-item__heading-button-content">
                         {heading}
                         <span className="ffe-accordion-item__heading-icon-wrapper">
-                            <ChevronIkon
+                            <Symbol
                                 className="ffe-accordion-item__heading-icon"
-                                aria-hidden="true"
-                            />
+                                ariaLabel=""
+                                size="sm"
+                            >
+                                expand_more
+                            </Symbol>
                         </span>
                     </span>
                 </button>

packages/ffe-accordion/less/accordion.less

@@ -29,7 +29,7 @@
         &:hover {
             .ffe-accordion-item__heading-icon {
                 transition: fill @ffe-transition-duration @ffe-ease;
-                fill: var(--ffe-v-accordion-secondary-color);
+                color: var(--ffe-v-accordion-secondary-color);
             }
 
             .ffe-accordion-item__heading-icon-wrapper {
@@ -56,14 +56,12 @@
         line-height: 0;
         border: 1px solid var(--ffe-v-accordion-primary-color);
         border-radius: 50%;
-        padding: 11px;
+        padding: var(--ffe-spacing-xs);
     }
 
     &__heading-icon {
         flex: 0 0 auto;
-        fill: var(--ffe-v-accordion-primary-color);
-        width: 11px;
-        height: 11px;
+        color: var(--ffe-v-accordion-primary-color);
         transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
     }
 
@@ -92,7 +90,7 @@
         .ffe-accordion-item {
             &:hover {
                 .ffe-accordion-item__heading-icon {
-                    fill: var(--ffe-v-accordion-secondary-color);
+                    color: var(--ffe-v-accordion-secondary-color);
                 }
 
                 .ffe-accordion-item__heading-icon-wrapper {

packages/ffe-buttons-react/package.json

@@ -29,7 +29,7 @@
     },
     "dependencies": {
         "@sb1/ffe-buttons": "^17.1.0",
-        "@sb1/ffe-icons-react": "^7.3.5",
+        "@sb1/ffe-symbols-react": "^2.0.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

packages/ffe-buttons-react/src/ActionButton.js

@@ -10,16 +10,31 @@ import {
     elementType,
 } from 'prop-types';
 import classNames from 'classnames';
+import Symbol from '@sb1/ffe-symbols-react';
 
 import Button from './BaseButton';
 
 export default function ActionButton(props) {
-    const { className, ...rest } = props;
+    const { className, leftIcon, rightIcon, ...rest } = props;
 
     return (
         <Button
             buttonType="action"
             className={classNames(className)}
+            leftIcon={
+                leftIcon && (
+                    <Symbol ariaLabel="" size="sm">
+                        {leftIcon}
+                    </Symbol>
+                )
+            }
+            rightIcon={
+                rightIcon && (
+                    <Symbol ariaLabel="" size="sm">
+                        {rightIcon}
+                    </Symbol>
+                )
+            }
             {...rest}
         />
     );
@@ -40,8 +55,8 @@ ActionButton.propTypes = {
     innerRef: oneOfType([func, shape({ current: object })]),
     /** Shows a loader if true */
     isLoading: bool,
-    /** Icon shown to the left of the label */
-    leftIcon: node,
-    /** Icon shown to the right of the label */
-    rightIcon: node,
+    /** Name of Icon shown to the left of the label */
+    leftIcon: string,
+    /** Name of Icon shown to the right of the label */
+    rightIcon: string,
 };

packages/ffe-buttons-react/src/BackButton.js

@@ -9,8 +9,21 @@ import {
     elementType,
 } from 'prop-types';
 import InlineButton from './InlineBaseButton';
+import Symbol from '@sb1/ffe-symbols-react';
 
-const BackButton = props => <InlineButton buttonType="back" {...props} />;
+const BackButton = props => {
+    return (
+        <InlineButton
+            buttonType="back"
+            leftIcon={
+                <Symbol ariaLabel="" size="md">
+                    chevron_left
+                </Symbol>
+            }
+            {...props}
+        />
+    );
+};
 
 BackButton.propTypes = {
     /** The button label */

packages/ffe-buttons-react/src/BaseButton.js

@@ -58,13 +58,13 @@ const BaseButton = props => {
                 {leftIcon &&
                     React.cloneElement(leftIcon, {
                         className: 'ffe-button__icon ffe-button__icon--left',
-                        'aria-hidden': 'true',
+                        weight: 300,
                     })}
                 {children}
                 {rightIcon &&
                     React.cloneElement(rightIcon, {
                         className: 'ffe-button__icon ffe-button__icon--right',
-                        'aria-hidden': 'true',
+                        weight: 300,
                     })}
             </span>
             {supportsSpinner && isLoading && (

packages/ffe-buttons-react/src/ExpandButton.js

@@ -10,7 +10,7 @@ import {
     elementType,
 } from 'prop-types';
 import classNames from 'classnames';
-import { KryssIkon } from '@sb1/ffe-icons-react';
+import Symbol from '@sb1/ffe-symbols-react';
 
 const ExpandButton = props => {
     const {
@@ -38,23 +38,36 @@ const ExpandButton = props => {
             {...rest}
         >
             {isExpanded && (
-                <KryssIkon className="ffe-button__icon" aria-hidden="true" />
+                <Symbol
+                    className="ffe-button__icon"
+                    ariaLabel=""
+                    size="sm"
+                    weight={300}
+                >
+                    close
+                </Symbol>
             )}
             {!isExpanded && (
                 <span>
-                    {leftIcon &&
-                        React.cloneElement(leftIcon, {
-                            'aria-hidden': true,
-                            className:
-                                'ffe-button__icon ffe-button__icon--left',
-                        })}
+                    {leftIcon && (
+                        <Symbol
+                            className="ffe-button__icon ffe-button__icon--left"
+                            ariaLabel=""
+                            weight={300}
+                        >
+                            {leftIcon}
+                        </Symbol>
+                    )}
                     {children}
-                    {rightIcon &&
-                        React.cloneElement(rightIcon, {
-                            'aria-hidden': true,
-                            className:
-                                'ffe-button__icon ffe-button__icon--right',
-                        })}
+                    {rightIcon && (
+                        <Symbol
+                            className="ffe-button__icon ffe-button__icon--right"
+                            ariaLabel=""
+                            weight={300}
+                        >
+                            {rightIcon}
+                        </Symbol>
+                    )}
                 </span>
             )}
         </Element>
@@ -70,10 +83,10 @@ ExpandButton.propTypes = {
     element: oneOfType([func, string, elementType]),
     /** An accessible label for the close-button, only shown in the "isExpanded" state  */
     closeLabel: string,
-    /** Icon shown to the left of the label */
-    leftIcon: node,
-    /** Icon shown to the right of the label */
-    rightIcon: node,
+    /** Name of Icon shown to the left of the label */
+    leftIcon: string,
+    /** Name of Icon shown to the right of the label */
+    rightIcon: string,
     /** Ref-setting function, or ref created by useRef, passed to the button element */
     innerRef: oneOfType([func, shape({ current: object })]),
     /** When true the component will render a circle with an X indicating whatever is controlled is in an expanded state. */