通过 require.context 动态加载SVG图标

（3月份和同事爬山看日出，图片拍摄于日出之时）

前言

需求就是有一个表格，表格里的数据就是一些文件，在文件名称列，需要根据文件的后缀渲染不同的文件图标。 图标就是放在代码静态资源中的一些svg图。我们需要根据不同的文件后缀渲染不同的svg图。

代码实现

我们可以选择像这样将文件一个一个引入进来。但是这样很麻烦，所有有没有能一次性导入的方法呢？

代码实现

  const importAll = (requireContext: any) => {
    const list = requireContext.keys().map((key: any) => {
      const name = key.replace(/\.\/(.*)\.\w+$/, "$1");
      return { name, value: requireContext(key) };
    });
    return list;
  };

  const [svgIconList, setSvgIconList] = useState([]);

  useEffect(() => {
    setSvgIconList(
      importAll(require.context("@/app/icons/file-icons", true, /\.svg$/)),
    );
  }, []);

输入如下对象

这样我们就可以通过不同的name渲染不同的module

我们还需要一个函数根据不同的文件后缀得到不同的svg的name

/**
 * 将文件文件名转为文件类型后缀
 * @param {string} fileName mime type
 * @returns svg icon name
 */
export function parseMimeTypeToIconName(suffix:string) {
  if (!suffix) {
    return 'file-type-unknown'
  }
  const ext = suffix
  if (!ext) {
    return 'file-type-unknown'
  }
  if (['png', 'jpg', 'jpeg', 'ico', 'gif', 'bmp', 'webp'].includes(ext)) {
    return 'file-type-img'
  }
  if (['markdown', 'md', 'txt'].includes(ext)) {
    return 'file-type-txt'
  }
  if (['docx', 'doc', 'docm', 'dot', 'dotx'].includes(ext)) {
    return 'file-type-office'
  }
  if (['csv', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xltx'].includes(ext)) {
    return 'file-type-excel'
  }
  if (ext === 'pdf') {
    return 'file-type-pdf'
  }
  if (['pptx', 'ppt', 'pptm'].includes(ext)) {
    return 'file-type-ppt'
  }
  if (['zip', 'rar', '7z', 'tar', 'gz', 'tgz', 'tar.gz', 'tar.xz'].includes(ext)) {
    return 'file-type-zip'
  }
  if (['mp4', 'avi', 'wmv', 'rmvb', '3gp', 'mov', 'm4v', 'flv', 'mkv'].includes(ext)) {
    return 'file-type-video'
  }
  if (['mp3', 'wav'].includes(ext)) {
    return 'file-type-music'
  }
  if (
    ['vue', 'js', 'go', 'java', 'ts', 'css', 'html', 'php', 'c', 'cpp', 'swift', 'kt'].includes(ext)
  ) {
    return 'file-type-code'
  }
  return 'file-type-unknown'
}

渲染svg图

文末