无法使用世博会矢量图标中的所有图标

Question

这基本上就是我拥有的代码

import { Ionicons } from '@expo/vector-icons';

class DrawerItem extends React.Component {
    render() {
        return (
            <Ionicons name="speedometer" size={14} color="green" />
        )
    }
}

我正在尝试使用在Ionicons documentation中找到的名为speedometer的图标。但是，在它的位置上出现了一个问号?，并且我得到了以下错误：

Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...

该错误向我显示了我可以使用的名称，但没有任何意义，因为Ionicons文档提到有一个名为speedometer的图标。

我发现的另一件事是那个特定的图标没有出现在Expo Vector Icons documentation中。

然而，我想补充一下。有没有办法包含Ionicons库中的所有图标？

Answer 1

你必须这样导入图标：

import { MaterialCommunityIcons } from '@expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />

Answer 2

正如您所说的，Ionicons不包含speedometer图标。请改用ios-speedometer。

如果你真的想要那个特定的图标，我建议下载SVG并使用react-svgr (或任何其他svg jsx工具)将其转换为独立的组件。

别忘了安装react-native-svg :)你现在可以使用普通导入来导入图标。

例如，import SpeedometerIcon from './icons/Speedometer.js'