Appearance

从目录导入 SVG ​

此函数属于 Iconify Tools 中的 导入函数 的一部分。

函数 importDirectory() 和 importDirectorySync() 用于查找并导入目录中的所有 SVG 文件。

这两个函数功能相同，唯一的区别在于读取文件的方式。 函数 importDirectorySync() 同步读取文件，而 importDirectory() 异步读取文件。

这些函数会创建 IconSet 实例，该实例可导出为多种格式。

用法 ​

该函数包含以下参数：

  • dir，string 类型。要导入的目录。
  • options，object 类型。选项（可选）。

函数返回 IconSet 实例。

选项 ​

options 对象包含以下可选属性：

  • prefix，string 类型。图标集前缀。
  • includeSubDirs，boolean 类型。扫描子目录中的文件。默认启用。
  • keyword，function 类型。回调函数，根据文件名返回图标的关键词。
  • ignoreImportErrors，boolean|"warn" 类型。当图标加载失败时不抛出错误。默认启用。如需严格错误检查可禁用。如果设置为 "warn"，将记录警告但不会抛出错误。
  • keepTitles，boolean 类型。如果启用，将保留 SVG 中的标题。默认禁用。

在 importDirectory() 中，关键词回调可以是异步的， 但在 importDirectorySync() 中必须是同步的。 它包含 3 个参数：文件名、默认生成的关键词、图标集。 它应返回包含关键词的 string，如果应跳过该文件则返回 undefined。

验证 ​

导入图标后，需要进行以下处理：

请参阅下方示例。

示例 ​

异步示例：

example.ts
tsimport {
   importDirectory,
   cleanupSVG,
   runSVGO,
   parseColors,
   isEmptyColor,
} from '@iconify/tools';

(async () => {
   // Import icons
   const iconSet = await importDirectory('files/svg', {
       prefix: 'test',
   });

   // Validate, clean up, fix palette and optimise
   iconSet.forEach((name, type) => {
       if (type !== 'icon') {
           return;
       }

       const svg = iconSet.toSVG(name);
       if (!svg) {
           // Invalid icon
           iconSet.remove(name);
           return;
       }

       // Clean up and optimise icons
       try {
           // Clean up icon code
           cleanupSVG(svg);

           // Assume icon is monotone: replace color with currentColor, add if missing
           // If icon is not monotone, remove this code
           parseColors(svg, {
               defaultColor: 'currentColor',
               callback: (attr, colorStr, color) => {
                   return !color || isEmptyColor(color)
                       ? colorStr
                       : 'currentColor';
               },
           });

           // Optimise
           runSVGO(svg);
       } catch (err) {
           // Invalid icon
           console.error(`Error parsing ${name}:`, err);
           iconSet.remove(name);
           return;
       }

       // Update icon
       iconSet.fromSVG(name, svg);
   });

   // Export
   console.log(iconSet.export());
})();

同步示例：

example.ts
tsimport {
   importDirectorySync,
   cleanupSVG,
   runSVGO,
   parseColors,
   isEmptyColor,
} from '@iconify/tools';

// Import icons
const iconSet = importDirectorySync('files/svg', {
   prefix: 'test',
});

// Validate, clean up, fix palette and optimise
iconSet.forEachSync((name, type) => {
   if (type !== 'icon') {
       return;
   }

   const svg = iconSet.toSVG(name);
   if (!svg) {
       // Invalid icon
       iconSet.remove(name);
       return;
   }

   // Clean up and optimise icons
   try {
       // Clean up icon code
       cleanupSVG(svg);

       // Assume icon is monotone: replace color with currentColor, add if missing
       // If icon is not monotone, remove this code
       parseColors(svg, {
           defaultColor: 'currentColor',
           callback: (attr, colorStr, color) => {
               return !color || isEmptyColor(color)
                   ? colorStr
                   : 'currentColor';
           },
       });

       // Optimise
       runSVGO(svg);
   } catch (err) {
       // Invalid icon
       console.error(`Error parsing ${name}:`, err);
       iconSet.remove(name);
       return;
   }

   // Update icon
   iconSet.fromSVG(name, svg);
});

// Export
console.log(iconSet.export());