tclement0922 / compose-font-icons

Font icons composables for Compose Multiplatform
http://tclement.dev/compose-font-icons/
Apache License 2.0
7 stars 0 forks source link

Icons are cut when they are not square #2

Closed Nek-12 closed 2 months ago

Nek-12 commented 2 months ago

When icons are rendered, and in the font file, they are not square, they are being cut.

image
Box(Modifier.padding(24.dp)) {
    FontIcon(
        icon = "\uf604",
        font = rememberStaticIconFont(Font(FontAwesome.resource)),
        contentDescription = null,
        tint = LocalContentColor.current,
    )
}

This is especially apparent when using Modifier.size() like with a regular Icon composable.

The icon in the reproducer is https://fontawesome.com/v5/icons/lungs?f=classic&s=solid

File used: fontawesome_font_v6.ttf.zip

I suspect this is due to how text rendering works. When an icon is rendered, it is currently rendered as a regular character without any consideration in how it would fit within the bounding box given by outside code.

Ideally, the icon should be rendered in such a way that it's always centered inside the bounding box. The Icon composable also used as the base for the painter is also problematic since it enforces a minimum of 24.dp for the size inside Compose source code.

I tried various adjustments and modifiers to resolve the problem, but it looks like it should be solved directly inside the IconPainter.

tclement0922 commented 2 months ago

IconPainter actually does the layout measurements based on the bounding box, and sets the font size to either the width or the height, the lower one. This ensures that the icon won't clip vertically and match the bounding box height, but if the width is higher than the height then it will clip horizontally like here. I might have an idea to fix your issue, I'll keep you updated.

About the FontIcon composable (I guess that's what you meant by "The Icon composable"): 24 dp is the default size of the icon if none is set. To change that value, you can use ProvideIconParameters.

tclement0922 commented 2 months ago

I released the version 1.2.2 with the fix, it should be available now.

It took me a bit longer to fix it than I expected because the native Android implementation (Canvas.drawIcon, which is used by FontIconDrawable and FontIconBitmap) also had this issue, and the way it draws text is very different from the Compose way.