icon

fun RenderContext.icon(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = IconComponent.prefix, build: IconComponent.() -> Unit = {})

This component enables to render an icon. It basically wraps raw SVG images into a nicer API.

fritz2's default theme offers some basic predefined icons, have a look at dev.fritz2.styling.theme.Theme.icons.

Every icon must be wrapped inside an IconDefinition, that acts as a value class for the raw SVG markup. Such a definition is implicitly set by using the `fromTheme` configuration function:

icon { fromTheme { fritz2 } }
//     ^^^^^^^^^
       convenient function for easily set the predefined icons from the theme

// style the icon with the fritz2 styling DSL like any other component:
icon({
     color { "purple" }
     size { "10rem" }
     hover { color { warning } }
}) { fromTheme { fritz2 } }

If you want to use a custom icon, just set the three necessary properties of the icon component:

icon({
    size { large }
}) {
    displayName("kotlin")
    viewBox("0 0 60 60")
    svg("""
        <g>
                <linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="15.9594" y1="-13.0143" x2="44.3068" y2="15.3332" gradientTransform="matrix(1 0 0 -1 0 61)">
                <stop  offset="9.677000e-02" style="stop-color:#0095D5"/>
                <stop  offset="0.3007" style="stop-color:#238AD9"/>
                <stop  offset="0.6211" style="stop-color:#557BDE"/>
                <stop  offset="0.8643" style="stop-color:#7472E2"/>
                <stop  offset="1" style="stop-color:#806EE3"/>
            </linearGradient>
            <polygon id="XMLID_2_" style="fill:url(#XMLID_3_);" points="0,60 30.1,29.9 60,60 	"/>

                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4.2092" y1="48.9409" x2="20.6734" y2="65.405" gradientTransform="matrix(1 0 0 -1 0 61)">
                <stop  offset="0.1183" style="stop-color:#0095D5"/>
                <stop  offset="0.4178" style="stop-color:#3C83DC"/>
                <stop  offset="0.6962" style="stop-color:#6D74E1"/>
                <stop  offset="0.8333" style="stop-color:#806EE3"/>
            </linearGradient>
            <polygon style="fill:url(#SVGID_1_);" points="0,0 30.1,0 0,32.5 	"/>

                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-10.1017" y1="5.8362" x2="45.7315" y2="61.6694" gradientTransform="matrix(1 0 0 -1 0 61)">
                <stop  offset="0.1075" style="stop-color:#C757BC"/>
                <stop  offset="0.2138" style="stop-color:#D0609A"/>
                <stop  offset="0.4254" style="stop-color:#E1725C"/>
                <stop  offset="0.6048" style="stop-color:#EE7E2F"/>
                <stop  offset="0.743" style="stop-color:#F58613"/>
                <stop  offset="0.8232" style="stop-color:#F88909"/>
            </linearGradient>
            <polygon style="fill:url(#SVGID_2_);" points="30.1,0 0,31.7 0,60 30.1,29.9 60,0 	"/>
        </g>
    """.trimIndent()
    )
}

The above example will render quite a big Kotlin logo :-)

Of course you should consider to add the definition inside your own theme or to a central place within your application in order to make it reusable. You can of course also set the icon definition explicitly in order to achieve the latter:

val kotlinLogo = IconDefinition(
    "kotlin",
    "0 0 60 60",
    "<g>...</g>" // like in the example before
)
// later on:
icon { def(kotlinLogo) }

Parameters

styling

a lambda expression for declaring the styling as fritz2's styling DSL

baseClass

optional CSS class that should be applied to the element

the ID of the element

prefix

the prefix for the generated CSS class resulting in the form `$prefix-$hash`

build

a lambda expression for setting up the component itself. Details in IconComponent

icon

See also

Parameters