英文:
How to add icons in React.js
问题
"material-ui/core"包已被弃用。为了在我的App.jsx中添加图标，我应该怎么做？
https://www.npmjs.com/package/@material-ui/core
我在代码沙盒上运行它，我们直接搜索名称然后将其直接拖放到依赖项文件夹中。
要在React的App.jsx中添加图标：
英文:
The package : material-ui/core has been depracted .What should I do inorder to add the icons in my
App.jsx .
https://www.npmjs.com/package/@material-ui/core
I am running it on the code sand box where we directly to serach for the name and the drop it directyky into the dependencies folder.
To add icons in react APP.jsx
答案1
得分: 2
你可以使用 react-icons。
官方示例：
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> 让我们去喝 <FaBeer />? </h3>
}
}
// 功能型组件
function Question() {
return <FaBeer />
}
调整大小：
<FaBeer size={20} />
附注：
你可以通过以下方式安装 MUI：
npm install @mui/material @emotion/react @emotion/styled
英文:
You can use react-icons.
https://react-icons.github.io/react-icons/
npm install react-icons --save
Official sample:
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
//functional
function Question() {
return <FaBeer />
}
Adjust size:
<FaBeer size={20} />
ps.
You can install mui by
npm install @mui/material @emotion/react @emotion/styled
答案2
得分: 1
有很多适用于您的React应用的图标选项。一些受欢迎的图标库包括：
-
Font Awesome：
Font Awesome 是一个受欢迎的图标库，拥有超过2,000个免费和开源图标。它还提供年费79美元起的专业订阅，让您可以访问近20,000个图标。这些图标可以根据不同的大小和颜色进行定制。 -
React Feather：
React Feather 是基于Feather Icons库的React的一套极简主义开源图标集合。该图标集强调简约、一致性和易读性。 -
Material UI：
它让您可以访问由Google根据Material Design系统创建的Material Icons库。 -
React Icons：
它提供了大量的图标。 -
Heroicons：
Heroicons由Tailwind的同一制作者创建，Tailwind是一款受欢迎的CSS框架。这个库提供了一套小而精美的SVG图标集合。
还有许多其他选项。
英文:
There are many options for icons for your React app. Some of the popular icon libraries are:
-
Font Awesome:<br>
Font Awesome is a popular icon library, with over 2,000 free and open-source icons. It also offers a pro subscription starting at $79 a year, which gives you access to almost 20,000 icons. These icons can be customized with different sizes and colors. -
React Feather:<br>
React Feather is a collection of minimalist open source icons for React, based on the Feather Icons library. This icon set emphasizes simplicity, consistency and readability. -
Material UI:<br>
It gives you access to the Material Icons library, which was created by Google in line with the Material Design system. -
React Icons:<br>
It provides a large variety of icons. -
Heroicons:<br>
Heroicons was created by the same makers of Tailwind, a popular CSS framework. This library offers a small – but beautiful – collection of SVG icons.
And many more options.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论