组件

颜色

单色 (默认: 继承字体颜色)

查看代码

<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 (反转填充或描边属性)

颜色值加上 r- 前缀，反转当前 fill 属性

时钟图标：圆形是填充，时针分针是描边， Vue 图标：第一个 path 是描边，第二个是 path 是填充

查看代码

<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>

多色（按照 path/shape 的顺序设置）

查看代码

<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)

查看代码

<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>

第二和第三个色轮是在原色的基础上修改某些颜色

渐变

查看代码

<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>

修改原始渐变颜色

查看代码

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

original 必须是 true 才有效果

填充/描边

fill, 默认：true

查看代码

<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>

大小

size, 默认单位：px, 默认大小：16px

查看代码

<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>

方向

dir, 默认：up

查看代码

<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>

替换内容

替换 svg 代码 (replace)

查看代码

<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>