icon

内置图标有限，推荐使用 iconify

基本使用

引入

import { ArrowDownIcon, regist, ... } from "litos-ui";

regist(ArrowDownIcon);
// ...

使用

<l-arrow-down-icon></l-arrow-down-icon>

内置图标

框架内置的图标如下：

iconfont 图标

使用时需要单独引入 iconfont 图标文件。name 属性填入引入的 iconfont 文件里面对应的 id.

自定义图标

可以通过使用 base-icon 然后加入自定义的 svg-path 路径来构建自定义的图标

当前也可以通过继承 BaseIcon 来自定义图标

import { BaseIcon, regist } from "litos-ui";

class MyIcon extends BaseIcon {
  constructor() {
    super();
    this.viewBox = "0 0 1024 1024"; // 默认
  }

  renderChildren() {
    return '<path fill="currentColor" d="M512 320 192 704h639.936z"></path>';
  }
}

regist(MyIcon, "my-icon");

// <my-icon></my-icon>

颜色和尺寸

修改颜色和尺寸可以通过 color 和 font-size 修改

这里是通过 style 属性来修改的，也可以通过 class 来修改

Icon Attribute

参数	说明	类型	默认值
view-box	svg view box	string	0 0 1024 1024