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.

size?: number | string
The size of the icon.

Emits

click: [MouseEvent]
Triggered when the icon is clicked.

Examples

Standalone

Preview

Code

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

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

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

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

Pane

Preview

Let's get started

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Code

<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/flux';
</script>

Used components

• Icon