如何在React Native应用中使用Material Symbols？

这里有几个实用的npm包可以帮你在React或React Native项目中渲染Material Symbols，不用手动管理SVG文件：

React Web 项目 #

• @mui/icons-material
  Material UI官方的图标库，涵盖绝大多数Material Symbols，集成度高，支持和Material UI组件体系联动。
  安装：

  npm install @mui/icons-material @mui/material @emotion/react @emotion/styled
  

  使用示例：

  import HomeIcon from '@mui/icons-material/Home';
  
  function App() {
    return <HomeIcon />;
  }
  

• material-symbols-react
  专门针对Material Symbols打造的React组件库，支持自定义图标权重、填充状态、尺寸等核心属性，灵活性更强。
  安装：

  npm install material-symbols-react
  

  使用示例：

  import { Home } from 'material-symbols-react';
  
  function App() {
    return <Home weight="400" filled={false} size="24" />;
  }
  

React Native 项目 #

• react-native-vector-icons/MaterialCommunityIcons
  老牌React Native图标库，包含大量Material Symbols兼容图标，社区活跃度高，文档完善。需要额外配置原生端环境：iOS执行pod install，Android修改gradle配置。
  安装：

  npm install react-native-vector-icons
  

  使用示例：

  import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
  
  function App() {
    return <Icon name="home" size={24} color="#000000" />;
  }
  

• @react-native-material/icons
  专为React Native适配的Material Symbols库，完全遵循Material Design规范，无需额外复杂配置（部分版本可能需要依赖react-native-svg）。
  安装：

  npm install @react-native-material/icons
  

  使用示例：

  import { Home } from '@react-native-material/icons';
  
  function App() {
    return <Home size={24} color="black" />;
  }
  

如果你需要高度自定义图标样式或逻辑，你目前采用的本地SVG引用方案也是稳定可靠的选择，适合精细化需求场景。

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