Merged in feat/svg-instead-of-fonts (pull request #3411)

feat(SW-3695): use svg icons instead of font icons

* feat(icons): use svg instead of font icons

* feat(icons): use webpack/svgr for inlined svgs. Now support for isFilled again

* Merge master

* Remove old font icon


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -114,7 +114,7 @@ export function Gallery({
                 })}
                 role="button"
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
+                  if (e.key === "Enter" || e.key === " ") {
                     onImageClick()
                   }
                 }}

packages/design-system/lib/components/Lightbox/index.tsx

@@ -9,7 +9,6 @@ import { FullView } from "./FullView"
 import { Gallery } from "./Gallery"
 
 import styles from "./lightbox.module.css"
-import { cx } from "class-variance-authority"
 
 export type LightboxImage = {
   src: string

packages/design-system/lib/components/Lightbox/util.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from "react"
 
 const ANIMATION_OFFSET = 300
 
@@ -17,14 +17,14 @@ export const animationVariants = {
 export function useKeyboardNavigation(onPrev: () => void, onNext: () => void) {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') onPrev()
-      if (e.key === 'ArrowRight') onNext()
+      if (e.key === "ArrowLeft") onPrev()
+      if (e.key === "ArrowRight") onNext()
     },
     [onPrev, onNext]
   )
 
   useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
   }, [handleKeyDown])
 }