图标组件#

const IconifyV = Iconify.getVersion(); // 获取当前 Iconify 框架版本号
console.log(IconifyV); // 2.0.4

iconExists(name); // 检查icon是否存在，返回布尔值.
listIcons(); // 列出可用icons, 返回 string[]，可用值指的是存储在localstorage里的icon.
getIcon(name); // 返回一个 icon data, 一般json格式.

addIcon(); // 添加一个icon.
addCollection(); // 添加icon集.

renderSVG(name, customisations?) // 返回 <svg> 元素.
renderHTML(name, customisations?) // 返回 <svg> 字符串.
renderIcon(name, customisations?) // 返回icon data

const node = document.createElement("a");
node.innerHTML = 'Home icon: <span class="iconify" data-icon="mdi:home"></span>';
console.log(node);
/**
 * 打印如下:
 * <a>
 *      Home icon: <span class="iconify" data-icon="mdi:home"></span>
 * </a>
 ** /

const node = document.createElement('a');
node.innerHTML = 'Home icon: <span class="iconify" data-icon="mdi:home"></span>';
Iconify.scan(node);
console.log(node);
/**
 * 打印如下:
 * <a>
 *      Home icon: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home"><path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path></svg>
 * </a>
 ** /

const node = document.createElement("a");
setTimeout(() => {
  node.innerHTML =
    'Home icon: <span class="iconify" data-icon="mdi:home"></span>';
  console.log(node);
  /**
   * 打印如下:
   * <a>
   *      Home icon: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home"><path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path></svg>
   * </a>
   **/
}, 1000);
Iconify.observe(node); // 如果这里换成scan，则上边打印node 则是原始占位符，并不会被替换

stopObserving(); // 停止监听文档中的图标替换操作
pauseObserver(); // 暂停监听文档中的图标替换操作
resumeObserver(); // 继续监听文档中的图标替换操作

/**
 * 计算宽或者高
 *
 * @param {string|number} 宽或高
 * @param {number}  Width/height的比例
 * @param {number} 精确度，默认两位，可以不传
 * @return 宽或高
 */
const res = Iconify.calculateSize(2, 3); // 比如宽是2，宽高的比例是3
console.log(res); // 6

// 获取 icon data
const icon = Iconify.renderIcon("line-md:image-twotone");
// 创建 svg element
const svg = document.createElement("svg");
console.log(svg); // <svg></svg>
// 设置 svg内的 content
setTimeout(() => {
  svg.innerHTML = Iconify.replaceIDs(icon.body);
  console.log(svg); // <svg><g fill="none"><path d="M7 13l-4 3v3h18v-5l-5-4l-6 5l-3-2z" fill="currentColor" fill-opacity=".3" class="il-md-fill il-md-duration-0 il-md-delay-9"><path d="M3 14V5h18v14H3v-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="il-md-length-70 il-md-duration-4 il-md-delay-0"><path d="M3 16l4-3l3 2l6-5l5 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="il-md-length-25 il-md-duration-2 il-md-delay-4"><circle cx="7.5" cy="9.5" r="1.5" fill="currentColor" class="il-md-fill il-md-delay-6"></circle></path></path></path></g></svg>
}, 1000);

// local|session|all
Iconify.disableCache('all'); // 实测这个无效，还是用下边的吧，反正效果一样
Iconify.enableCache('all', false);

Iconify.loadIcons(['line-md:image-twotone'], (loaded, missing, pending, unsubscribe) => {
    console.log(loaded, missing, pending, unsubscribe);
    if (loaded.length) {
        console.log(`Icon 已经加载（即从网络请求到本地存储中）完毕，随时准备用作渲染.`);
    }
    if (missing.length) {
        console.log(`Icon 不存在.`);
    }
    if (pending.length) { // 当load多个Icons的时候会发生。
        console.log('请求中');
    }
})