FormaUI文档

Appearance

引入组件 ​

手动引入（可全局引入）

ts
// parent.vue
const FIcon = defineAsyncComponent(() => import('@/components/formaui/f-icon/f-icon.vue'))

基础用法 ​

name属性：图标名称

html
<f-icon name="about"></f-icon>
<f-icon name="about-fill"></f-icon>

color属性：图标颜色

html
<f-icon name="about" color="#19be6b"></f-icon>
<f-icon name="about-fill" color="#19be6b"></f-icon>

size属性：图标大小

html
<f-icon name="about" :size="32"></f-icon>

unit属性：图标单位（默认px）

html
<f-icon name="about-fill" :size="48" unit="rpx"></f-icon>

扩展图标 ​

  1. 准备字体文件，可从 iconfont 下载，获取所需 ttf 文件和 css 文件；
  2. 如果 ttf 文件比较小，可直接引入使用，如果文件比较大，可能开发工具无法自动将 ttf 文件转换为 base64，可通过网站 transfonter手动转换；
  3. 将 css 修改调整，并放置项目中，例如 /static/fonts/icon-extend.css，部分内容如下：
css
@font-face {
  font-family: aExtend;
  src: url(data:font/ttf;base64,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)
    format('truetype');
}
.f-icon__extend {
  font-family: 'aExtend' !important;
  text-align: center;
  text-decoration: none;
}

.icon-forbidden:before {
  content: '\e653';
}

.icon-forbidden-fill:before {
  content: '\e654';
}
  1. 将 css 文件全局引入，在 App.vue 中引入
css
@import './static/fonts/icon-extend.css';
  1. 使用 custom-prefix 和 name 属性自定义图标，取值对应 css 文件中值。
html
<f-icon custom-prefix="f-icon__extend" name="icon-forbidden"></f-icon>
<f-icon custom-prefix="f-icon__extend" name="icon-forbidden-fill"></f-icon>

插槽 ​

名称说明
--

属性 ​

名称类型说明默认值
namestring图标名称-
customPrefixstring自定义图标，所定义字体 class 名称-
size[number, string]图标大小32
unitstring大小单位px
colorstring图标颜色-
boldboolean是否加粗false
marginstring间距0
indexnumber索引0

事件 ​

事件名说明回调参数
click点击事件，点击图标时触发{index: Number}