Question

我想使用react-web-vector-icons中的发送图标，但是当我使用它时，它会在图标内显示框。如何从react-web-vector-icons获取发送图标？

如果react-web-vector-icons不适用于发送按钮，有人可以建议一些图标包装吗？

代码：

<div id="chat">
    <div class="card">
        <div id="messages" class="card-block">
        </div>
    </div>
    <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
    <Icon name='md-send' color='blue' size={20} />
</div>

截屏：

Answer 1

在您的组件中应具有这些内容，因为ms-send中包含Ionicons：

import Icon, {
    Ionicons,
} from 'react-web-vector-icons';

下一步是使用图标

<Ionicons
    name='md-send'
    color='blue'
    size={20}
        />

对于其他建议包，您可以使用React Icons

已更新 如果您仍然看不到图标，那么我们需要导入字体，但是如何导入。首先像这样在您的index.html中导入font-face：

<!DOCTYPE html>
html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
    @font-face {
        font-family: AntDesign;
        font-style: normal;
        font-weight: 400;
        src: url(fonts/AntDesign.ttf) format('truetype')
    }
    @font-face {
        font-family: Entypo;
        font-style: normal;
        font-weight: 400;
        src: url(fonts/Entypo.ttf) format('truetype')
    }

有关完整导入的信息，请参见此file

现在我们需要使用webpack导入字体，因此在您的webpac.config.js中添加以下测试：

{
            test: /\.(ttf)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: './fonts/[name].[ext]'
                },
            },]
        }

我们将这些添加到webpack来加载字体，只需在您应用的index.js中添加以下行而不是webpack测试即可：

require('react-web-vector-icons/fonts');

有关webpack配置的完整信息，您可以看到此file

现在，我们在应用程序中导入样式和字体，这意味着我们可以看到图标，重新启动应用程序，因为我们更改了webpack的配置并刷新了页面。

如何在reactjs中使用'react-web-vector-icons'？

1 个答案: