define-icon-element - 自定义 icon 显示元素

安装

# 安装模块
npm install define-icon-element
# or
pnpm add define-icon-element

定义图标元素

font 模式下基于 css 文件使用 class 来呈现

// 加载css文件 这一步是可选的，你也可以直接在css文件中导入
import { loadCss } from "define-icon-element";
loadCss("xxx.css");

// define icon element
import defineIconElement from "define-icon-element";
defineIconElement("data-icon", { prefix: "icon-", class: "iconfont" });

svg 模式下基于 js 文件使用 symbol 来呈现

// 加载js文件 这一步是可选的，你也可以直接在css文件中导入
import { loadJs } from "define-icon-element";
loadJs("xxx.js");

// define icon element
import defineIconElement from "define-icon-element";
defineIconElement("svg-icon", { prefix: "icon-", mode: "svg" });

使用图标元素

<data-icon name="xxx" />
<data-icon name="xxx" size="16" />
<data-icon name="xxx" size="16" color="red" />

<svg-icon name="xxx" size="16" color="red" />

方法说明

/**
 * @desc defineIconElement
 * @param {string} tagName - 用于在window中定义自定义元素的标签名
 * @param {object} [props]
 * @param {string|class} [props.mode = 'font'] - ['font'|'svg'] 字体从css文件加载时为font，字体从js文件加载时为svg
 * @param {string} [props.prefix] - 拼写完整name的前缀
 * @param {string} [props.class] - 插入额外的className
 * @param {string} [props.color] - 指定默认颜色
 * @param {number} [props.size] - 指定默认尺寸
 * @param {object} [props.style] - 指定默认style; svg模式下会默认插入{display: 'inline-flex'}
 * @param {function} [props.onInit] - 初始化节点后的回调
 * @return {function} - IconHtmlElement class
 */