Flux

Boxed icon ​

This component displays a single customizable Font Awesome icon, rendered as SVG in a box.

Props

name: FluxIconName
The name of the icon to use.

color?: FluxColor
The color used for the box.

rounded?: boolean
Renders the box as a circle instead of a rounded square.

size?: number
The size of the icon.

Examples ​

Standalone

<template>
    <FluxFlex :gap="15">
        <FluxBoxedIcon
            name="circle-check"
            :size="90"/>

        <FluxBoxedIcon
            name="lock"
            :size="90"/>

        <FluxBoxedIcon
            name="rocket"
            :size="90"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxBoxedIcon, FluxFlex } from '@flux-ui/components';
</script>

Rounded

Set rounded to draw the box as a circle.

<template>
    <FluxFlex :gap="15">
        <FluxBoxedIcon
            rounded
            color="primary"
            name="circle-check"
            :size="90"/>

        <FluxBoxedIcon
            rounded
            color="warning"
            name="lock"
            :size="90"/>

        <FluxBoxedIcon
            rounded
            name="rocket"
            :size="90"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxBoxedIcon, FluxFlex } from '@flux-ui/components';
</script>

Pane

Let's get started

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<template>
    <FluxPane
        variant="flat"
        style="max-width: 300px">
        <FluxPaneBody>
            <FluxBoxedIcon
                color="primary"
                name="rocket"
                :size="48"/>
        </FluxPaneBody>

        <FluxPaneHeader title="Let's get started"/>

        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxBoxedIcon, FluxPane, FluxPaneBody, FluxPaneHeader } from '@flux-ui/components';
</script>

Used components ​