Merge pull request #29 from HironTez/main

feat: icon 'fill' property
actifyjs · Nov 14, 2024 · d269447 · d269447
2 parents 4e0d9e7 + 03fcefc
commit d269447
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/packages/actify/src/components/Icon/Icon.tsx b/packages/actify/src/components/Icon/Icon.tsx
@@ -2,8 +2,10 @@ import React from 'react'
 import clsx from 'clsx'
 import styles from './icon.module.css'
 
-interface IconProps extends React.ComponentProps<'span'> {}
-const Icon = ({ className, children, ...rest }: IconProps) => {
+interface IconProps extends React.ComponentProps<'span'> {
+  fill?: boolean
+}
+const Icon = ({ className, children, fill, ...rest }: IconProps) => {
   return (
     <React.Suspense
       fallback={
@@ -20,11 +22,18 @@ const Icon = ({ className, children, ...rest }: IconProps) => {
     >
       <link
         rel="stylesheet"
-        // @ts-ignore
+        // @ts-expect-error
         precedence="default"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=swap"
       />
-      <span {...rest} className={clsx(styles['icon'], className)}>
+      <span
+        {...rest}
+        className={clsx(
+          styles['icon'],
+          fill ? styles['icon-filled'] : undefined,
+          className
+        )}
+      >
         <i aria-hidden="true">{children}</i>
       </span>
     </React.Suspense>
@@ -33,4 +42,4 @@ const Icon = ({ className, children, ...rest }: IconProps) => {
 
 Icon.displayName = 'Actify.Icon'
 
-export { Icon }
+export { Icon }
diff --git a/packages/actify/src/components/Icon/icon.module.css b/packages/actify/src/components/Icon/icon.module.css
@@ -24,3 +24,7 @@
     text-rendering: optimizelegibility;
   }
 }
+
+.icon-filled i {
+  font-variation-settings: 'FILL' 1;
+}