Skip to content

Icon 图标 0.1.27 更新

基本用法

通过 name 属性设置使用哪个图标。

html
<wd-icon name="add-circle" />

图标颜色

设置 color 属性。

html
<wd-icon name="add-circle" color="#0083ff" />

图标大小

设置 size 属性。

html
<wd-icon name="add-circle" size="20px" />

自定义图标

如果需要在现有 Icon 的基础上使用更多图标,可以引入第三方 iconfont 对应的字体文件和 CSS 文件,之后就可以在 Icon 组件中直接使用。

css
/* 路径 src/iconfont/index.css */

@font-face {
  font-family: "fish";
  src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
}

.fish {
  font-family: "fish" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fish-kehuishouwu:before {
  content: "\e627";
}
html
<!-- app.vue -->
 <style>
@import '@/iconfont/index.css';
</style>
html
<!-- 通过 class-prefix 指定类名为 fish -->
<wd-icon class-prefix="fish" name="kehuishouwu" />

Attributes

参数说明类型可选值默认值最低版本
name使用的图标名字,可以使用链接图片string---
color图标的颜色string-inherit-
size图标的字体大小string-inherit-
classPrefix类名前缀,用于使用自定义图标string-'wd-icon'0.1.27
custom-style根节点样式string---

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.