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

(3月份和同事爬山看日出,图片拍摄于日出之时)

前言

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

代码实现

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

代码实现

js 复制代码
  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

js 复制代码
/**
 * 将文件文件名转为文件类型后缀
 * @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图

文末

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript