如何基于组件Props从CSS文件加载SVG图标？

完全可以实现这种需求，核心思路是将Kendo SVG图标转换为CSS背景图（使用Data URI格式），然后通过组件的icon Prop动态绑定对应的CSS类，从而渲染图标。以下是完整示例：

1. 编写图标样式文件 #

先从@progress/kendo-svg-icons中提取需要的SVG代码，将其转换为Data URI后写入CSS，每个图标对应一个专属类：

/* 通用图标容器样式 */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Eye图标类 */
.icon-eyeIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

/* Edit图标类（示例扩展） */
.icon-editIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

2. 封装带图标Prop的Button组件 #

创建可复用组件，通过icon Prop动态挂载对应CSS类：

import './icon-styles.css';

type IconButtonProps = {
  icon?: string;
  children: React.ReactNode;
  onClick?: () => void;
  // 可扩展其他Button原生属性
};

export const IconButton = ({ icon, children, onClick, ...rest }: IconButtonProps) => {
  return (
    <button 
      onClick={onClick} 
      {...rest} 
      style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', cursor: 'pointer' }}
    >
      {icon && <span className={`icon icon-${icon}`}></span>}
      {children}
    </button>
  );
};

3. 使用组件示例 #

直接通过icon Prop指定要加载的图标类名即可：

import { IconButton } from './IconButton';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <IconButton icon="eyeIcon">查看内容</IconButton>
      <IconButton icon="editIcon" style={{ marginLeft: '12px' }}>编辑信息</IconButton>
      <IconButton style={{ marginLeft: '12px' }}>无图标按钮</IconButton>
    </div>
  );
}

export default App;

注意事项 #

• SVG转Data URI时，需正确转义特殊字符（如<转%3C、#转%23），可使用在线工具批量处理
• 若需修改图标颜色，可直接在Data URI的SVG代码中调整fill属性值
• 图标数量较多时，建议编写脚本批量生成CSS类，减少手动重复工作

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