Cfg Design of Uniapp3

Appearance

Return to top
On this page

Icon 图标

提示

添加默认图标

template
// src/App.vue
<style lang="scss">
/* 非 nvue 引入 */
/* #ifndef APP-NVUE */
@import url('@/uni_modules/cfg-design/components/c-icon/iconfont.css');
/* #endif */
</style>
ts
// src/main.ts
import { icons, setIcons } from '@/uni_modules/cfg-design'

// setIcons(family, icons)
setIcons('c-icon', icons)

使用 iconfont.cn 编辑图标。

1 、 打开 REMIX ICON V2.5

2 、 参考 uniapp 编辑图标教程

3 、 下载来的 iconfont.css 文件内容只要 @font-face 部分， 参考 /src/uni_modules/cfg-design/components/c-icon/iconfont.css 文件，并引入编辑的图标文件到 App.vue ，参考添加默认图标

css
@font-face {
  font-family: "c-icon";
  src: url('[base64]')
}

4 、 设置图标名

ts
// src/main.ts
import { setIcons, addIcons } from '@/uni_modules/cfg-design'

// 设置图标，会删除之前的图标
setIcons('my-icon', {
  home: '\ue839',
  ...
})

// 添加图标，不会删除之前的图标
addIcons('my-icon', {
  home: '\ue839',
  ...
})

基本使用

template
<c-icon name="add-line" />

<c-icon family="my-icon" name="home" />

颜色

template
<c-icon color="primary" name="add-line" />
<c-icon color="error" name="add-line" />
<c-icon color="success" name="add-line" />
<c-icon color="warning" name="add-line" />
<c-icon color="info" name="add-line" />
<c-icon color="#7546c9" name="add-line" />

大小

template
<c-icon size="s" name="add-line" />
<c-icon size="m" name="add-line" />
<c-icon size="l" name="add-line" />
<c-icon size="100" name="add-line" />

API

Icon Props

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsIconPropsundefined全部 props 。 使用说明
text-propsTextPropsundefinedCIcon 组件是引用 CText 实现的。TextProps
familystringc-icon字体名称
namestringundefined图标名称
sizestring | numberundefined图标大小。 使用说明
colorstringundefined图标颜色。 使用说明