feat: move DNB icons to subfolder (with v9 compatibility) (#2200)

* Remove existing icons

* Move icons lock and meta files

* Remove left over PDF lock file

* Change consuming imports of portal

* Refactor convert script

* Update index files with new subfolder path

* Add icons files as tsx files in subfolder

* Deal with IconPrimary externalisation

* Generate index files

* Omit deleting files we want to keep

* Refactor related tests

* Look for converted files instead of SVG sources when creating index files

* Add docs/info about icons dev

* Automatically find subfolders

* Find outdated icons and warn

* Make total count of icons better understandable

* Convert script to TypeScript

packages/dnb-design-system-portal/above_the_line_medium.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _path;
+
+import React from 'react';
+
+const above_the_line_medium = props => React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), _path || (_path = React.createElement("path", {
+  stroke: "#000",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  d: "M12 21V9m0 0-4 4m4-4s2.243 2.047 4 4M2 3.5h2m4 0h2m4 0h2m4 0h2"
+})));
+
+export default above_the_line_medium;

packages/dnb-design-system-portal/src/docs/contribute/deploy/icons.mdx

@@ -6,14 +6,23 @@ title: 'Icons Library'
 
 Icons are getting added (more or less) automatically by extracting them from [Figma Icons Library](https://www.figma.com/file/2aNwT4Lbyt9hFmDv8k34yN/Eufemia---Icons?node-id=1%3A9).
 
+## What is the icons flow?
+
+1. Icons are fetched as SVG files from an API.
+1. The information about the new icons are stored in two data files:
+   - `icons-svg.lock` contains API information, so we are able to compare it next time the API is called.
+   - `icons-meta.json` contains additional information such as the category it belongs to.
+1. They are then optimized with SVGO and stored in `/assets/icons/`. Each size in a different SVG.
+1. During build (`yarn build`) the SVG files get converted to JSX based React components and stored in `/src/icons`. Also several index files and fallbacks are automatically generated.
+
 ## How to sync new icons?
 
 To fetch new icons from the [Figma Icons Library](https://www.figma.com/file/2aNwT4Lbyt9hFmDv8k34yN/Eufemia---Icons?node-id=1%3A9) file, you have to:
 
 1. Re-branch `main`, and name it `icons/{your-branch-name}` (it needs to include icons in the name):
 
    ```bash
-   git checkout main && git pull origin main
+   git pull origin main
    ```
 
    ```bash
@@ -34,6 +43,11 @@ If you need to re-fetch one or several icons that got updated or changed in the
 
 1. Find the icon in the `icons-svg.lock` file and change the `updated` field to `0`.
 1. Commit the change – but ensure the git branch name starts with `icon/` (more details above).
+1. You may consider to run `yarn workspace @dnb/eufemia figma:reset` – it will delete everything and refetch the icons.
+
+## How to convert icons only?
+
+During development of the conversion script `convertSvgToJsx` you may consider to run `yarn workspace @dnb/eufemia dev:icons`. Its the same process, when calling `yarn build`. It will convert SVGs to JSXs and create all the needed index files in watch mode.
 
 ## Icons CI/CD process description
 

packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx

@@ -9,8 +9,8 @@ import {
   bell_medium as BellMedium,
   bell as Bell,
 } from '@dnb/eufemia/src/icons'
-import * as PrimaryIconsMedium from '@dnb/eufemia/src/icons/primary_icons_medium'
-import * as SecondaryIconsMedium from '@dnb/eufemia/src/icons/secondary_icons_medium'
+import * as PrimaryIconsMedium from '@dnb/eufemia/src/icons/dnb/primary_icons_medium'
+import * as SecondaryIconsMedium from '@dnb/eufemia/src/icons/dnb/secondary_icons_medium'
 import { getListOfIcons } from '../../../../shared/parts/icons/ListAllIcons'
 
 import { Icon, P, IconPrimary, Button } from '@dnb/eufemia/src'

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/Examples.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import { Button, Icon, P } from '@dnb/eufemia/src'
 import styled from '@emotion/styled'
-import { hamburger as hamburgerIcon } from '@dnb/eufemia/src/icons/secondary_icons'
+import { hamburger as hamburgerIcon } from '@dnb/eufemia/src/icons'
 
 export const LargeButtonsAndIconsExample = () => (
   <ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/bundles.mdx

@@ -80,8 +80,8 @@ Because `importmap` is still not supported by the majority of browsers, we use a
       "imports": {
         "react": "...",
         "react-dom": "...",
-        "../icons/primary_icons.js": "https://unpkg.com/@dnb/eufemia/esm/dnb-ui-icons.min.mjs",
-        "../icons/primary_icons_medium.js": "https://unpkg.com/@dnb/eufemia/esm/dnb-ui-icons.min.mjs"
+        "../icons/dnb/primary_icons.js": "https://unpkg.com/@dnb/eufemia/esm/dnb-ui-icons.min.mjs",
+        "../icons/dnb/primary_icons_medium.js": "https://unpkg.com/@dnb/eufemia/esm/dnb-ui-icons.min.mjs"
       }
     }
   </script>

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/react.mdx

@@ -29,7 +29,7 @@ And here an example with several imports:
 ```js
 import { Button, Icon } from '@dnb/eufemia/components'
 import { H1, P, Link } from '@dnb/eufemia/elements'
-import { hamburger as hamburgerIcon } from '@dnb/eufemia/icons/secondary_icons'
+import { hamburger as hamburgerIcon } from '@dnb/eufemia/icons'
 ```
 
 ### Events

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js

@@ -7,7 +7,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { useStaticQuery, graphql } from 'gatsby'
-import { hamburger as hamburgerIcon } from '@dnb/eufemia/src/icons/secondary_icons'
+import { hamburger as hamburgerIcon } from '@dnb/eufemia/src/icons'
 import { close as closeIcon } from '@dnb/eufemia/src/icons/primary_icons'
 import PortalLogo from './graphics/logo'
 import { Icon, Button } from '@dnb/eufemia/src'

packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.js

@@ -6,11 +6,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Icon } from '@dnb/eufemia/src/components'
 import { P } from '@dnb/eufemia/src/elements'
-import * as PrimaryIcons from '@dnb/eufemia/src/icons/primary_icons'
-import * as SecondaryIcons from '@dnb/eufemia/src/icons/secondary_icons'
-import * as PrimaryIconsMedium from '@dnb/eufemia/src/icons/primary_icons_medium'
-import * as SecondaryIconsMedium from '@dnb/eufemia/src/icons/secondary_icons_medium'
-import iconsMetaData from '@dnb/eufemia/src/icons/icons-meta.json'
+import * as PrimaryIcons from '@dnb/eufemia/src/icons/dnb/primary_icons'
+import * as SecondaryIcons from '@dnb/eufemia/src/icons/dnb/secondary_icons'
+import * as PrimaryIconsMedium from '@dnb/eufemia/src/icons/dnb/primary_icons_medium'
+import * as SecondaryIconsMedium from '@dnb/eufemia/src/icons/dnb/secondary_icons_medium'
+import iconsMetaData from '@dnb/eufemia/src/icons/dnb/icons-meta.json'
 import AutoLinkHeader from '../../tags/AutoLinkHeader'
 import {
   listStyle,

packages/dnb-design-system-portal/src/shared/tags/Tabbar.tsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import { Link, navigate } from 'gatsby'
 import { Button, Tabs } from '@dnb/eufemia/src/components'
-import { fullscreen as fullscreenIcon } from '@dnb/eufemia/src/icons/secondary_icons'
+import { fullscreen as fullscreenIcon } from '@dnb/eufemia/src/icons'
 import AutoLinkHeader from './AutoLinkHeader'
 import { tabsWrapperStyle } from './Tabbar.module.scss'
 

packages/dnb-eufemia/jest.config.js

@@ -14,6 +14,7 @@ const config = {
     '<rootDir>/stories/',
   ],
   transformIgnorePatterns: ['/node_modules/(?!(ora|globby)/)'],
+  setupFiles: ['core-js'], // is needed by "globby" inside of convertSvgToJsx
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
     '^.+\\.(md|txt|css|scss)$': 'jest-raw-loader',

packages/dnb-eufemia/package.json

@@ -40,7 +40,7 @@
     "build:types:dev": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'",
     "build:types:esm": "yarn tsc --project tsconfig.definitions.json --declarationDir ./build/esm --rootDir src",
     "precommit": "yarn lint-staged",
-    "dev:icons": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/convertIcons' --ignore '/icons/**' --ignore '*.json'",
+    "dev:icons": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/convertIcons' --ext ts --ignore '/icons/**' --ignore '*.json'",
     "dev:packages": "nodemon --exec 'yarn build:packages && yarn build:copy' --ext js,html,json,css,scss --watch './src/**/*' --ignore './umd/*'",
     "dev:resources": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/resources/makeResourcesPackage.js' --ext js,html,json,css,scss --watch './build/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
     "dev:tasks": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/dev.js' --watch 'rollup.config.js' --ext js,html,json,css,scss --watch './src/components/**/*' --watch './src/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
@@ -156,6 +156,7 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
+    "@types/fs-extra": "11.0.1",
     "@types/jest": "29.2.6",
     "@types/jest-axe": "3.5.5",
     "@types/jest-image-snapshot": "6.1.0",

packages/dnb-eufemia/rollup.config.js

@@ -15,13 +15,13 @@ import branchName from 'current-git-branch'
 const excludes = [
   {
     name: 'dnbIcons',
-    global: [path.resolve('./src/icons/primary_icons.js')],
-    external: '../../icons/primary_icons.js',
+    global: [path.resolve('./src/icons/dnb/primary_icons.ts')],
+    external: '../../icons/dnb/primary_icons.ts',
   },
   {
     name: 'dnbIcons',
-    global: [path.resolve('./src/icons/primary_icons_medium.js')],
-    external: '../../icons/primary_icons_medium.js',
+    global: [path.resolve('./src/icons/dnb/primary_icons_medium.ts')],
+    external: '../../icons/dnb/primary_icons_medium.ts',
   },
 ]
 

packages/dnb-eufemia/scripts/figma/helpers/docHelpers.js

@@ -186,7 +186,7 @@ export const getLocalVersionFromLockFile = async ({ figmaFile }) => {
 }
 
 export const getFigmaDoc = async ({
-  figmaFile,
+  figmaFile = null,
   localFile = null,
   forceRefetch = null,
   preventUpdate = null,