mv-iconfront

一个通用的 Vue 3 Iconfont 图标组件封装库。

安装 (Installation)

npm install mv-iconfront

使用方法 (Usage)

全局注册

在项目的入口文件中全局注册组件。您还可以在此配置全局默认的主题色。

import { createApp } from 'vue'
import App from './App.vue'
import MvIconfront from 'mv-iconfront'
import 'mv-iconfront/dist/style.css' // 必须引入 CSS 文件以保证样式正常

const app = createApp(App)

// 基础注册 (默认颜色为白色 #FFFFFF)
app.use(MvIconfront)

// 或者：配置全局默认主题色
app.use(MvIconfront, {
  defaultColor: '#409EFF' // 自定义全局默认颜色
})

app.mount('#app')

局部引入

import { MvIconfront } from 'mv-iconfront'
import 'mv-iconfront/dist/style.css'

组件使用 (Component Usage)

该组件接收 name 属性来指定图标类名（例如 icon-home），并支持多种自定义属性。

基础示例

<!-- 使用全局默认颜色 (如果未配置则默认为白色) -->
<mv-iconfront name="icon-home" />

<!-- 自定义颜色 (覆盖全局默认值) -->
<mv-iconfront name="icon-user" color="#FF0000" />

<!-- 自定义大小 (支持数字或带单位的字符串) -->
<mv-iconfront name="icon-settings" size="24" />
<mv-iconfront name="icon-settings" size="2rem" />

状态与变体

1. 禁用状态 (Disabled State) 图标显示为灰色 (#C0C4CC)，并且鼠标悬停时显示为禁止手势 (not-allowed)。 优先级：最高 (会覆盖所有其他颜色设置)。

<mv-iconfront name="icon-edit" disabled />

2. 红色变体 (Red Variant) 快速将图标设置为标准的错误/危险红色 (#f56c6c)。 优先级：中等 (会覆盖 color 和全局默认值，但在 disabled 状态下无效)。

<mv-iconfront name="icon-delete" isRed />

颜色优先级逻辑 (Color Priority)

组件确定图标颜色的顺序如下（优先级从高到低）：

1. disabled: 如果为 true，强制显示 灰色 (#C0C4CC)。
2. isRed: 如果为 true，强制显示 红色 (#f56c6c)。
3. color: 如果提供了该属性，使用 自定义颜色。
4. defaultColor: 使用 app.use() 中配置的全局颜色 (未配置则默认为 #FFFFFF)。

<!-- 示例：禁用状态优先级高于红色变体 -->
<mv-iconfront name="icon-trash" isRed disabled /> 
<!-- 结果：显示为灰色图标 -->

属性 API (Props API)

| 属性名 (Prop) | 类型 (Type) | 默认值 (Default) | 说明 (Description) | | ------------- | ------------- | ---------------- | ------------------------------------------------------------- | | name | String | '' | 具体的图标类名 (例如 icon-a-qianse_tubiao_yichangbaocuo1) | | color | String | '' | 自定义颜色覆盖 (hex, rgb 等) | | size | String/Number | '' | 字体大小。纯数字会被视为 px 单位。 | | isRed | Boolean | false | 设置图标为红色 (#f56c6c)。 | | disabled | Boolean | false | 设置图标透明度为0.4 并将鼠标样式设为禁止。 |