如何查找react-map-gl-draw库内置图标对应的className

react-map-gl-draw内置图标className查询方法 #

react-map-gl-draw是基于@mapbox/mapbox-gl-draw封装的绘图组件，所有内置图标对应的className都继承自mapbox-gl-draw的默认样式定义，你可以通过以下两个途径获取全量列表：

• 直接查看项目依赖中@mapbox/mapbox-gl-draw包的样式源文件，所有控制按钮的className都在样式表的按钮选择器部分统一定义
• 参考官方默认提供的全量内置按钮className列表，常用类名如下：
  • 点绘制：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_point
  • 线绘制：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_line
  • 多边形绘制：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_polygon
  • 框选编辑：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_rectangle
  • 选中编辑：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_select
  • 顶点/边直接编辑：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_direct_select
  • 清空/删除：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash
  • 合并要素：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_combine
  • 拆分要素：mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_uncombine

如果你自定义修改过mapbox-gl-draw的默认主题样式，需要以你本地项目的样式表定义为准，部分二次封装的版本可能会删减或新增自定义图标类名。

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