XIcon 关闭图标

一个带悬停动效的「关闭 ✕」图标。

基础用法

将鼠标移到图标上查看展开动画。

悬停展开

color

size = 56

strokeWidth / lineWidth

duration = 1200ms

查看代码

<template>
    <div style="display: flex; flex-wrap: wrap; gap: 40px; align-items: center">
        <!-- 基础用法：悬停展开成 X -->
        <div style="text-align: center">
            <XIcon />
            <div style="margin-top: 8px; font-size: 12px; color: #888">悬停展开</div>
        </div>

        <!-- 自定义颜色 -->
        <div style="text-align: center">
            <XIcon color="#646cff" />
            <div style="margin-top: 8px; font-size: 12px; color: #888">color</div>
        </div>

        <!-- 自定义尺寸（number，单位 px） -->
        <div style="text-align: center">
            <XIcon :size="56" />
            <div style="margin-top: 8px; font-size: 12px; color: #888">size = 56</div>
        </div>

        <!-- 自定义线条粗细 -->
        <div style="text-align: center">
            <XIcon :stroke-width="3" :line-width="4" />
            <div style="margin-top: 8px; font-size: 12px; color: #888">strokeWidth / lineWidth</div>
        </div>

        <!-- 自定义动画时长（ms） -->
        <div style="text-align: center">
            <XIcon :duration="1200" color="#e5484d" />
            <div style="margin-top: 8px; font-size: 12px; color: #888">duration = 1200ms</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { XIcon } from "@a-drowned-fish/rox-v";
</script>

Props

参数	说明	类型	默认值
color	图标颜色	string	"#000000"
size	图标整体尺寸（数字，单位 px，同时作用于宽高）	number	34
strokeWidth	四周边框线的粗细（单位 px）	number	1
lineWidth	中央 X 线条的粗细（单位 px）	number	1
duration	动画时长	number	600

Events

事件名	说明	回调参数
click	点击图标时触发	() => void