style: add custom font css variables

apps/app/src/components/FontFamily/GlobalFonts.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 
+import { useGrowiCustomIcon } from './use-growi-custom-icon';
 import { useLatoFontFamily } from './use-lato';
 import { useMaterialSymbolsOutlined } from './use-material-symbols-outlined';
 import { useSourceHanCodeJP } from './use-source-han-code-jp';
@@ -8,16 +9,17 @@ import { useSourceHanCodeJP } from './use-source-han-code-jp';
  * Define prefixed by '--grw-font-family'
  */
 export const GlobalFonts = memo((): JSX.Element => {
-
   const latoFontFamily = useLatoFontFamily();
   const sourceHanCodeJPFontFamily = useSourceHanCodeJP();
   const materialSymbolsOutlinedFontFamily = useMaterialSymbolsOutlined();
+  const customSvgFontFamily = useGrowiCustomIcon();
 
   return (
     <>
       {latoFontFamily}
       {sourceHanCodeJPFontFamily}
       {materialSymbolsOutlinedFontFamily}
+      {customSvgFontFamily}
     </>
   );
 });

apps/app/src/components/FontFamily/use-growi-custom-icon.tsx

@@ -0,0 +1,18 @@
+import localFont from 'next/font/local';
+
+import { DefineStyle } from './types';
+
+const growiCustomIconFont = localFont({
+  src: '../../../../../packages/apps-font-icons/font/growi-custom-icon.woff2',
+  adjustFontFallback: false,
+});
+
+export const useGrowiCustomIcon: DefineStyle = () => (
+  <style jsx global>
+    {`
+      :root {
+        --grw-font-family-custom-svg-font: ${growiCustomIconFont.style.fontFamily};
+      }
+    `}
+  </style>
+);