如何在React中使用iconify-json图标

前景提要

iconify图表库涵盖了超多图片，是一个超级图标库
官网地址

开始

安装依赖和你需要的图标集

npm install @iconify/react @iconify/json
npm install @iconify-json/mdi

基础使用

import React from 'react';
import { Icon } from '@iconify/react';
import mdiIcons from '@iconify-json/mdi'; // 导入图标集

const App = () => {
  // 获取图标数据
  const homeIcon = mdiIcons.icons['mdi-home'];
  const accountIcon = mdiIcons.icons['mdi-account'];

  return (
    <div>
      <h1>Iconify 图标示例</h1>
      <Icon icon={homeIcon} style={{ fontSize: '48px', color: 'blue' }} />
      <Icon icon={accountIcon} style={{ fontSize: '48px', color: 'green' }} />
    </div>
  );
};

export default App;

优化使用

import { Icon } from '@iconify/react';
import mdiIcons from '@iconify-json/mdi'; // 导入图标集

// 工具函数：动态获取图标
const getIcon = (iconName: string) => mdiIcons.icons[iconName];

const App = () => {
  return (
    <div>
      <Icon icon={getIcon('mdi-home')} style={{ fontSize: '48px', color: 'blue' }} />
      <Icon icon={getIcon('mdi-account')} style={{ fontSize: '48px', color: 'green' }} />
    </div>
  );
};

export default App;