Icons to ts

packages/ffe-icons-react/package.json

@@ -19,15 +19,14 @@
         "url": "ssh://[email protected]:SpareBank1/designsystem.git"
     },
     "scripts": {
-        "build": "ffe-buildtool babel",
+        "build": "ffe-buildtool tsc",
         "clean": "rimraf gen-src lib es types",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
+        "lint": "eslint src --ext ts,tsx",
+        "lint:fix": "eslint src --fix --ext ts,tsx",
         "test": "ffe-buildtool jest"
     },
     "dependencies": {
-        "@sb1/ffe-icons": "^14.0.1",
-        "prop-types": "^15.7.2"
+        "@sb1/ffe-icons": "^14.0.1"
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.1",

packages/ffe-icons-react/src/Icon.spec.js → packages/ffe-icons-react/src/Icon.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { render, screen } from '@testing-library/react';
 
 describe('Icon', () => {

packages/ffe-icons-react/src/Icon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export interface IconProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** The path to the svg-file og base64 string */
+    fileUrl: string;
+    /** Size of the icon, default is the closest defined font-size */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Symbols stroke weight. This can affect overall size of symbol, 400 is default */
+    weight?: 300 | 500;
+    /** Aria label text. If null/undefined, aria-hidden is automatically set to true */
+    ariaLabel?: React.ComponentProps<'span'>['aria-label'];
+}
+
+export const Icon: React.FC<IconProps> = ({
+    fileUrl,
+    className,
+    ariaLabel,
+    size = 'md',
+    ...rest
+}) => {
+    return (
+        <span
+            role="img"
+            aria-label={ariaLabel}
+            aria-hidden={!ariaLabel}
+            className={classNames('ffe-icons', `ffe-icons--${size}`, className)}
+            style={{
+                maskImage: `url(${fileUrl})`,
+                WebkitMaskImage: `url(${fileUrl})`,
+            }}
+            {...rest}
+        />
+    );
+};

packages/ffe-icons-react/src/index.tsx

@@ -0,0 +1 @@
+export { Icon, IconProps } from './Icon';

packages/ffe-icons-react/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./lib",
+        "module": "commonjs"
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}

packages/ffe-icons-react/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./es",
+        "module": "esnext"
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}

packages/ffe-icons-react/tsconfig.types.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./types",
+        "declaration": true,
+        "emitDeclarationOnly": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}