React-leaflet从组件文件夹引入图标不显示 仅public文件夹引入正常

• 基于React的项目（无论是Create React App、Vite等主流脚手架搭建的项目），通过require或ES模块import引入静态资源时，构建工具会自动对资源做hash重命名，打包后放到产物的静态资源目录下。你直接将require()的返回值赋值给iconUrl是无效的：CommonJS规范下require引入非JS资源返回的是模块导出对象，需要取对象的.default属性才能拿到资源最终的打包访问路径。
• Leaflet的图标解析逻辑会直接把iconUrl作为字符串路径发起资源请求，如果你传入的是模块对象而非字符串路径，自然无法匹配到有效资源。

方案1：基于CommonJS require适配 #

取require返回值的default属性即可：

Icon = new L.icon({
  iconUrl: require(`../data/icons/typescript.svg`).default,
  iconSize: new L.Point(60, 75),
  className: 'leaflet-div-icon'
});

方案2：基于ES模块import适配（更推荐） #

在组件顶部预先引入图标，直接拿到打包后的访问路径：

// 组件顶部引入
import typescriptIcon from '../data/icons/typescript.svg';

// 初始化图标时直接使用
Icon = new L.icon({
  iconUrl: typescriptIcon,
  iconSize: new L.Point(60, 75),
  className: 'leaflet-div-icon'
});

Vite项目额外适配 #

如果你的项目是Vite搭建的，且配置了SVG自动转组件的规则，需要在引入路径后加?url后缀明确声明要获取资源路径：

import typescriptIcon from '../data/icons/typescript.svg?url';

内容的提问来源于stack exchange，提问作者Grt