[gallery] Use FontIcon

gallery-processor/src/jvmMain/kotlin/com/konyaco/fluent/gallery/processor/ComponentProcessor.kt

@@ -162,6 +162,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
                                     fileSpecBuilder.addImport(iconImportPrefix, this)
                                     "$iconPrefix.$this"
                                 },
+                                iconGlyph = componentGroupConfig.iconGlyph,
                                 content = componentGroupConfig.contentData,
                                 items = createItemsString(
                                     itemName,
@@ -259,11 +260,13 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
         var nameArg: KSValueArgument? = null
         var descriptionArg: KSValueArgument? = null
         var icon: String? = null
+        var iconGlyph: Char? = null
         annotation.arguments.forEach {
             when (it.name?.asString()) {
                 "name" -> nameArg = it
                 "description" -> descriptionArg = it
                 "icon" -> icon = (it.value as? String)?.ifBlank { null }
+                "iconGlyph" -> iconGlyph = (it.value as? Char)?.takeIf { char -> char != 'A' }
             }
         }
         val description = descriptionArg?.value as? String ?: ""
@@ -312,6 +315,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
                             fileSpec.addImport(iconImportPrefix, this)
                             "$iconPrefix.$this"
                         },
+                        iconGlyph = iconGlyph,
                         items = null,
                         getItem = { it }
                     )
@@ -327,6 +331,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
         description: String,
         content: String?,
         icon: String?,
+        iconGlyph: Char?,
         items: List<T>?,
         getItem: (T) -> String,
     ) = CodeBlock.builder()
@@ -337,6 +342,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
             addStatement("description = %S,", description)
             addStatement("content = $content,")
             addStatement("icon = $icon,")
+            addStatement("iconGlyph = ${iconGlyph?.let { "'$it'" }},")
             if (items != null) {
                 createList("items = ", items, getItem)
             } else {
@@ -348,11 +354,13 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
 
     private fun generateComponentGroupConfig(group: String): ComponentGroupConfig {
         var icon: String? = null
+        var iconGlyph: Char? = null
         var contentData: String? = null
         componentGroups[group]?.let { (annotation) ->
             annotation.arguments.forEach {
                 when (it.name?.asString()) {
                     "icon" -> icon = (it.value as? String)?.ifBlank { null }
+                    "iconGlyph" -> iconGlyph = (it.value as? Char).takeIf { char -> char != 'A' }
                     "generateScreen" -> if (it.value as? Boolean == true) {
                         contentData = """
                             { ComponentIndexScreen(it) }
@@ -361,7 +369,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
                 }
             }
         }
-        return ComponentGroupConfig(icon, contentData)
+        return ComponentGroupConfig(icon, iconGlyph, contentData)
     }
 
     private fun PropertySpec.Builder.lazy(buildAction: CodeBlock.Builder.() -> Unit) = delegate(
@@ -395,6 +403,7 @@ class ComponentProcessor(private val logger: KSPLogger, private val codeGenerato
 
     data class ComponentGroupConfig(
         val icon: String?,
+        val iconGlyph: Char?,
         val contentData: String?
     )
 }

gallery/src/androidMain/kotlin/com/konyaco/fluent/gallery/component/FontIcon.android.kt

@@ -0,0 +1,8 @@
+package com.konyaco.fluent.gallery.component
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal actual fun ProvideFontIcon(content: @Composable () -> Unit) {
+    content()
+}

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/App.kt

@@ -43,6 +43,7 @@ import com.konyaco.fluent.component.TextBoxButtonDefaults
 import com.konyaco.fluent.component.TextField
 import com.konyaco.fluent.gallery.component.ComponentItem
 import com.konyaco.fluent.gallery.component.ComponentNavigator
+import com.konyaco.fluent.gallery.component.FontIcon
 import com.konyaco.fluent.gallery.component.components
 import com.konyaco.fluent.gallery.component.rememberComponentNavigator
 import com.konyaco.fluent.gallery.component.flatMapComponents
@@ -214,7 +215,13 @@ private fun NavigationItem(
             onSelectedItemChanged(navItem)
             expandedItems.value = !expandedItems.value
         },
-        icon = navItem.icon?.let { { Icon(it, navItem.name) } },
+        icon = navItem.icon?.let { {
+            if (navItem.iconGlyph != null) {
+                FontIcon(navItem.iconGlyph, navItem.icon, navItem.name)
+            } else {
+                Icon(it, navItem.name)
+            }
+        } },
         content = { Text(navItem.name) },
         expandItems = expandedItems.value,
         items = navItem.items?.let {
@@ -235,4 +242,4 @@ private fun NavigationItem(
     )
 }
 
-private val settingItem = ComponentItem("Settings", group = "", description = "", icon = Icons.Default.Settings) { SettingsScreen() }
+private val settingItem = ComponentItem("Settings", group = "", description = "", icon = Icons.Default.Settings, iconGlyph = '\uE713') { SettingsScreen() }

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/GalleryTheme.kt

@@ -6,19 +6,24 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import com.konyaco.fluent.*
 import com.konyaco.fluent.background.Mica
+import com.konyaco.fluent.gallery.component.LocalFontIconFontFamily
+import com.konyaco.fluent.gallery.component.ProvideFontIcon
 
 val LocalStore = compositionLocalOf<Store> { error("Not provided") }
 
 class Store(
     systemDarkMode: Boolean,
     enabledAcrylicPopup: Boolean,
-    compactMode: Boolean
+    compactMode: Boolean,
+    fontIconEnabled: Boolean
 ) {
     var darkMode by mutableStateOf(systemDarkMode)
 
     var enabledAcrylicPopup by mutableStateOf(enabledAcrylicPopup)
 
     var compactMode by mutableStateOf(compactMode)
+
+    var fontIconEnabled by mutableStateOf(fontIconEnabled)
 }
 
 @OptIn(ExperimentalFluentApi::class)
@@ -33,7 +38,8 @@ fun GalleryTheme(
         Store(
             systemDarkMode = systemDarkMode,
             enabledAcrylicPopup = true,
-            compactMode = true
+            compactMode = true,
+            fontIconEnabled = true
         )
     }
 
@@ -43,21 +49,33 @@ fun GalleryTheme(
     CompositionLocalProvider(
         LocalStore provides store
     ) {
-        FluentTheme(
-            colors = if (store.darkMode) darkColors() else lightColors(),
-            useAcrylicPopup = store.enabledAcrylicPopup,
-            compactMode = store.compactMode
-        ) {
-            if (displayMicaLayer) {
-                Mica(modifier = Modifier.fillMaxSize()) {
-                    content()
+        ProvideFontIcon(store.fontIconEnabled) {
+            FluentTheme(
+                colors = if (store.darkMode) darkColors() else lightColors(),
+                useAcrylicPopup = store.enabledAcrylicPopup,
+                compactMode = store.compactMode
+            ) {
+                if (displayMicaLayer) {
+                    Mica(modifier = Modifier.fillMaxSize()) {
+                        content()
+                    }
+                } else {
+                    CompositionLocalProvider(
+                        LocalContentColor provides FluentTheme.colors.text.text.primary,
+                        content = content
+                    )
                 }
-            } else {
-                CompositionLocalProvider(
-                    LocalContentColor provides FluentTheme.colors.text.text.primary,
-                    content = content
-                )
             }
         }
     }
+}
+
+@Composable
+private fun ProvideFontIcon(enabled: Boolean, content: @Composable () -> Unit) {
+    ProvideFontIcon {
+        CompositionLocalProvider(
+            LocalFontIconFontFamily provides if (enabled) LocalFontIconFontFamily.current else null,
+            content = content
+        )
+    }
 }

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/annotation/Component.kt

@@ -4,6 +4,7 @@ package com.konyaco.fluent.gallery.annotation
 annotation class Component(
     val name: String = "",
     val icon: String = "",
+    val iconGlyph: Char = 'A',
     val description: String = "",
     val group: String = "_Auto",
     val index: Int = -1,

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/annotation/ComponentGroup.kt

@@ -3,6 +3,7 @@ package com.konyaco.fluent.gallery.annotation
 @Target(AnnotationTarget.PROPERTY)
 annotation class ComponentGroup(
     val icon: String,
+    val iconGlyph: Char = 'A',
     val index: Int = Int.MAX_VALUE,
     val generateScreen: Boolean = true,
     val packageMap: String = ""

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/component/ComponentGroupInfo.kt

@@ -8,54 +8,54 @@ object ComponentGroupInfo {
 
     private const val screenPackage: String = "com.konyaco.fluent.gallery.screen"
 
-    @ComponentGroup("Ruler", index = 0, generateScreen = false, packageMap = "$screenPackage.design")
+    @ComponentGroup("Ruler",  iconGlyph = '\uEB3C', index = 0, generateScreen = false, packageMap = "$screenPackage.design")
     const val DesignGuidance = "Design guidance"
 
-    @ComponentGroup("Accessibility", generateScreen = false, index = 3)
+    @ComponentGroup("Accessibility", iconGlyph = '\uE776', generateScreen = false, index = 3)
     const val Accessibility = "Design guidance/Accessibility"
 
-    @ComponentGroup("CheckboxChecked", index = 2, packageMap = "$screenPackage.basicinput")
+    @ComponentGroup("CheckboxChecked", iconGlyph = '\uE73A', index = 2, packageMap = "$screenPackage.basicinput")
     const val BasicInput = "Basic input"
 
-    @ComponentGroup("Table", index = 3, packageMap = "$screenPackage.collections")
+    @ComponentGroup("Table", iconGlyph = '\uE80A', index = 3, packageMap = "$screenPackage.collections")
     const val Collections = "Collections"
 
-    @ComponentGroup("CalendarClock", index = 4, packageMap = "$screenPackage.datetime")
+    @ComponentGroup("CalendarClock", iconGlyph = '\uEC92', index = 4, packageMap = "$screenPackage.datetime")
     const val DateAndTime = "Date & time"
 
-    @ComponentGroup("Chat", index = 5, packageMap = "$screenPackage.dialogs")
+    @ComponentGroup("Chat", iconGlyph = '\uE8BD', index = 5, packageMap = "$screenPackage.dialogs")
     const val DialogAndFlyout = "Dialog & flyouts"
 
-    @ComponentGroup("SlideLayout", index = 6)
+    @ComponentGroup("SlideLayout", iconGlyph = '\uE8A1', index = 6)
     const val Layout = "Layout"
 
-    @ComponentGroup("VideoClip", index = 7)
+    @ComponentGroup("VideoClip", iconGlyph = '\uE786', index = 7)
     const val Media = "Media"
 
-    @ComponentGroup("Save", index = 8)
+    @ComponentGroup("Save", iconGlyph = '\uE74E', index = 8)
     const val MenusAndToolbars = "Menus & toolbars"
 
-    @ComponentGroup("Flash", index = 9)
+    @ComponentGroup("Flash", iconGlyph = '\uE945', index = 9)
     const val Motion = "Motion"
 
-    @ComponentGroup("Navigation", index = 10, packageMap = "$screenPackage.navigation")
+    @ComponentGroup("Navigation", iconGlyph = '\uE700', index = 10, packageMap = "$screenPackage.navigation")
     const val Navigation = "Navigation"
 
-    @ComponentGroup("ArrowSort", index = 11)
+    @ComponentGroup("ArrowSort", iconGlyph = '\uE174', index = 11)
     const val Scrolling = "Scrolling"
 
-    @ComponentGroup("ChatMultiple", index = 12, packageMap = "$screenPackage.status")
+    @ComponentGroup("ChatMultiple", iconGlyph = '\uE8F2', index = 12, packageMap = "$screenPackage.status")
     const val StatusAndInfo = "Status & info"
 
-    @ComponentGroup("Color", index = 13, packageMap = "$screenPackage.styles")
+    @ComponentGroup("Color", iconGlyph = '\uE2B1', index = 13, packageMap = "$screenPackage.styles")
     const val Styles = "Styles"
 
-    @ComponentGroup("System", index = 14)
+    @ComponentGroup("System", iconGlyph = '\uE770', index = 14)
     const val System = "System"
 
-    @ComponentGroup("TextFont", index = 15, packageMap = "$screenPackage.text")
+    @ComponentGroup("TextFont", iconGlyph = '\uE8D2', index = 15, packageMap = "$screenPackage.text")
     const val Text = "Text"
 
-    @ComponentGroup("Window", index = 16)
+    @ComponentGroup("Window", iconGlyph = '\uE7C4', index = 16)
     const val Windowing = "Windowing"
 }

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/component/ComponentItem.kt

@@ -9,5 +9,6 @@ class ComponentItem(
     val description: String,
     val items: List<ComponentItem>? = null,
     val icon: ImageVector? = null,
+    val iconGlyph: Char? = null,
     val content: (@Composable ComponentItem.(navigator: ComponentNavigator) -> Unit)?
 )

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/component/CopyButton.kt

@@ -11,7 +11,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.text.AnnotatedString
 import com.konyaco.fluent.component.Button
-import com.konyaco.fluent.component.Icon
 import com.konyaco.fluent.icons.Icons
 import com.konyaco.fluent.icons.regular.Checkmark
 import com.konyaco.fluent.icons.regular.Copy
@@ -39,9 +38,9 @@ fun CopyButton(
         content = {
             AnimatedContent(isCopy) { target ->
                 if (target) {
-                    Icon(Icons.Default.Checkmark, contentDescription = null)
+                    FontIcon('\uE73E', Icons.Default.Checkmark, contentDescription = null)
                 } else {
-                    Icon(Icons.Default.Copy, contentDescription = null)
+                    FontIcon('\uE8C8', Icons.Default.Copy, contentDescription = null)
                 }
             }
         },

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/component/FontIcon.kt

@@ -0,0 +1,71 @@
+package com.konyaco.fluent.gallery.component
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+import com.konyaco.fluent.component.Icon
+import com.konyaco.fluent.component.Text
+
+//TODO Remove when FontIcon is public
+@Composable
+internal fun FontIcon(
+    glyph: Char,
+    modifier: Modifier = Modifier,
+    iconSize: TextUnit = FontIconDefaults.fontSizeStandard,
+    fallback: (@Composable () -> Unit)? = null,
+) {
+    if (LocalFontIconFontFamily.current != null || fallback == null) {
+        Text(
+            text = glyph.toString(),
+            fontFamily = LocalFontIconFontFamily.current,
+            fontSize = iconSize,
+            modifier = Modifier.then(modifier)
+                .height(with(LocalDensity.current) { iconSize.toDp() }),
+            onTextLayout = {
+            }
+        )
+    } else {
+        fallback()
+    }
+}
+
+@Composable
+internal fun FontIcon(
+    glyph: Char,
+    vector: ImageVector?,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+    iconSize: TextUnit = FontIconDefaults.fontSizeStandard,
+    vectorSize: Dp = with(LocalDensity.current) { iconSize.toDp() }
+) {
+    FontIcon(
+        glyph = glyph,
+        modifier = modifier,
+        iconSize = iconSize,
+        fallback = if (vector == null) {
+            null
+        } else {
+            { Icon(vector, contentDescription, modifier = Modifier.size(vectorSize)) }
+        }
+    )
+}
+
+internal object FontIconDefaults {
+    val fontSizeStandard = 16.sp
+    val fontSizeSmall = 12.sp
+}
+
+@Composable
+internal expect fun ProvideFontIcon(
+    content: @Composable () -> Unit
+)
+
+internal val LocalFontIconFontFamily = staticCompositionLocalOf<FontFamily?> { null }