Component

Color

Single color (default: inherit font color)

View Code

<demo-wrap :title="$attrs.title" :style="{ color: 'orange' }">
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" />
    <icon
        data="@fa/solid/arrow-up.svg"
        width="36"
        height="36"
        color="red"
    />
    <icon
        data="@fa/solid/arrow-up.svg"
        width="36"
        height="36"
        color="green"
    />
    <icon
        data="@fa/solid/arrow-up.svg"
        width="36"
        height="36"
        color="blue"
    />
</demo-wrap>

r-color (Reverse fill or stroke attributes)

Clock icon: the circle is the fill, the hour and minute hands are the stroke, Vue icon: the first path is the stroke, the second is the path is the fill

View Code

<demo-wrap :title="$attrs.title">
    <icon
        data="@fa/solid/arrow-up.svg"
        width="50"
        height="50"
        color="r-red"
    />
    <icon
        data="@icon/clock.svg"
        width="50"
        height="50"
        color="#8A99B2 r-#1C2330"
    />
    <!-- use css var -->
    <icon
        data="@icon/clock.svg"
        width="50"
        height="50"
        color="#8A99B2 r-var(--color-bg-primary)"
    />
    <icon
        data="@icon/vue.svg"
        width="50"
        height="50"
        :fill="false"
        color="#42b983 r-#42b983"
    />
</demo-wrap>

Multicolor (set in the order of path/shape)

View Code

<demo-wrap :title="$attrs.title">
    <icon
        data="@icon/check.svg"
        width="80"
        height="80"
        color="#42b983 r-white"
    />
    <icon
        data="@icon/colorwheel.svg"
        width="80"
        height="80"
        color="#FBAD20 #F5EB13 #B8D433 #6BC9C6 #058BC5 #34469D #7E4D9F #C63D96 #ED1944"
    />
    <!-- Use array -->
    <icon
        data="@icon/colorwheel.svg"
        width="80"
        height="80"
        :color="[
            'rgba(0, 0, 100, .5)',
            '#F5EB13',
            '#B8D433',
            '#6BC9C6',
            '#058BC5',
            '#34469D',
            '#7E4D9F',
            '#C63D96',
            '#ED1944',
        ]"
    />
</demo-wrap>

Original Color (original)

View Code

<demo-wrap :title="$attrs.title">
    <icon data="@icon/colorwheel.svg" width="60" height="60" original />
    <!-- overwrite original color -->
    <icon
        data="@icon/colorwheel.svg"
        width="60"
        height="60"
        original
        color="_ black _ black _"
    />
    <icon
        data="@icon/colorwheel.svg"
        width="60"
        height="60"
        original
        color="_ r-black _ r-red _"
    />
    <icon data="@icon/gift.svg" width="60" height="60" original />
</demo-wrap>

The second and third color wheels modify certain colors based on the primary colors

Gradient

View Code

<svg style="position: absolute; width: 0; opacity: 0">
    <defs>
        <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stop-color="#57f0c2" />
            <stop offset="95%" stop-color="#147d58" />
        </linearGradient>
        <linearGradient id="gradient-2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stop-color="#7295c2" />
            <stop offset="95%" stop-color="#252e3d" />
        </linearGradient>
    </defs>
</svg>
<demo-wrap :title="$attrs.title">
    <icon
        data="@icon/vue.svg"
        width="100"
        height="100"
        color="url(#gradient-1) url(#gradient-2)"
    ></icon>
</demo-wrap>

Modify Original Gradient Colors

View Code

<demo-wrap :title="$attrs.title">
    <icon
        data="@icon/gift.svg"
        width="60" height="60"
        original
        :stop-colors="['blue', 'green']" />
</demo-wrap>

The original porp must to be true

Size

size, default unit: px, default size: 16px

View Code

<demo-wrap :title="$attrs.title" :style="{ fontSize: '12px' }">
    <icon data="@fa/solid/arrow-up.svg" />
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" />
    <icon data="@fa/solid/arrow-up.svg" width="4em" height="4em" />
    <icon data="@fa/solid/arrow-up.svg" width="4rem" height="4rem" />
</demo-wrap>

Fill/Stroke

fill, default: true

View Code

<demo-wrap :title="$attrs.title">
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" />
    <icon
        :fill="false"
        class="stroke-icon"
        data="@fa/solid/arrow-up.svg"
        width="36"
        height="36"
    />
</demo-wrap>

<style>
.stroke-icon path[pid='0'] {
    stroke-width: 10px;
}
</style>

Direction

dir, default: up

View Code

<demo-wrap :title="$attrs.title">
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" />
    <icon
        data="@fa/solid/arrow-up.svg"
        width="36"
        height="36"
        dir="right"
    />
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" dir="down" />
    <icon data="@fa/solid/arrow-up.svg" width="36" height="36" dir="left" />
</demo-wrap>

Repalce content

Replace SVG content (replace)

View Code

<demo-wrap :title="$attrs.title">
    <icon
        class="icon"
        data="@icon/colorwheel.svg"
        width="80"
        height="80"
        original
        :replace="(svg) => svg.replace('#34469D', 'var(--color-white)')"
    />
</demo-wrap>