Appearance

自定义图标加载器 ​

本教程是 Iconify for Vue 教程 的一部分。

函数 setCustomIconLoader() 和 setCustomIconsLoader() 用于定义自定义图标加载器。

它有什么用途？

  • 从自定义源加载图标数据。
  • 修改图标，例如更改颜色或描边宽度。

用法 ​

这两个函数的参数相同，仅回调函数的类型不同：

  • callback，function。用于加载图标的回调函数，可以是同步或异步函数。
  • prefix，string。图标集前缀。
  • provider，string。图标集提供商，可选。

回调函数是用于加载图标数据的函数。

支持同步和异步（返回 Promise 实例）回调函数。

这两个函数的回调函数具有相似的参数。

setCustomIconLoader() 的参数：

  • name，string。图标名称。
  • prefix，string。图标集前缀。
  • provider，string。图标集提供商。

参数的顺序是有意安排的：按重要性从高到低排列。如果你已为某个前缀设置了加载器，通常只需要 name 参数即可。

回调函数返回 IconifyIcon 类型的图标数据，失败时返回 null（或返回这些类型的 Promise）。

setCustomIconsLoader() 的回调函数几乎完全相同，区别在于：

  • 第一个参数是图标名称数组：string[]。
  • 回调函数返回 IconifyJSON 类型的图标集，失败时返回 null（或返回这些类型的 Promise）。

示例 ​

jsimport { setCustomIconLoader, loadIcon } from "@iconify/vue";

// Creates icon set "tabler-thin" that loads icons from Tabler Icons and makes them thinner
// Then you can use "tabler:angle" to render icon with default stroke, or "tabler-thin:angle" to render thinner icon
setCustomIconLoader(async (name) => {
 const data = await loadIcon(`tabler:${name}`);
 return data
   ? {
       ...data,
       body: data.body.replaceAll('stroke-width="2"', 'stroke-width="1"'),
     }
   : null;
}, "tabler-thin");

// Fetches icon from custom server
// Icon data must be in IconifyIcon format
setCustomIconLoader(async (name) => {
 const response = await fetch(`https://example.com/icons/${name}.json`);
 if (!response.ok) {
   return null;
 }
 return await response.json();
}, "custom-server");

请确保在渲染任何图标之前设置加载器，否则组件可能会尝试从 API 加载图标，从而导致渲染失败。