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

Question

I want to use send icon from react-web-vector-icons but when I use it it displays box inside of icon.我想使用react-web-vector-icons发送图标，但是当我使用它时，它会在图标内显示框。 How can I get send icon from react-web-vector-icons ?如何从react-web-vector-icons获取发送react-web-vector-icons ？

If react-web-vector-icons doesn't work for send button can someone please suggest some package for icons ?如果react-web-vector-icons不适用于发送按钮，有人可以建议一些图标包吗？

Code:代码：

<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>

Screenshot:截屏：

Answer 1

In your component you should have these because ms-send is included in Ionicons :在您的组件中，您应该拥有这些，因为ms-send包含在Ionicons ：

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

next is to use Icons接下来是使用图标

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

For Suggestion another package you can use React Icons对于建议另一个包，您可以使用React Icons

Updated if you still can't see icons so we need to imports fonts but how.如果您仍然看不到图标，则已更新，因此我们需要导入字体但如何导入。 first import font-face in your index.html like this :首先像这样在 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')
    }

for complete import please see this file如需完整导入，请参阅此文件

now we need to import fonts with webpack so in your webpac.config.js add these test:现在我们需要使用webpack导入字体，因此在您的webpac.config.js添加这些测试：

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

we add these to webpack to load font's , simply we can add below line instead of webpack test in index.js of you app :我们将这些添加到 webpack 以加载字体，只需在您的应用程序的index.js中添加以下行而不是 webpack 测试：

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

for complete see of webpack config you can see this file要完整查看webpack配置，您可以看到此文件

now we import styles and fonts in our app and means we can see the icon, restart your app because we change webpack config and refresh page.现在我们在我们的应用程序中导入样式和字体，这意味着我们可以看到图标，重新启动您的应用程序，因为我们更改了 webpack 配置并刷新页面。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-25 12:45:44

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-25 12:45:44

解决方案1
0 已采纳 2018-10-25 12:45:44