One of the cool things about react-icons is the extensive library they make available within the single package. Once it’s completed, we should be ready to use it in our project.
Inside of your project, run the following command: yarn add react-icons
To get started with react-icons, we want to install it in our project. Once you have your new app or your existing app, we should be ready to go! New Create React App Part 1: Adding SVG icons with react-icons Adding react-icons to your project Note: replace with the name you want to use for your project. To get started with create-react-app, you can create a new project using the following command in your terminal: yarn create react-app You can even use an existing project.īecause we don’t need anything special to add our icons, I’m going to use create-react-app. Part 0: Creating a React appįor this walkthrough, you can use any React framework you’d like whether that’s Create React App or Next.js. We’ll also take a look at how we can manually add SVG files right into our app by copying the code of an SVG file right into a new component. We’re first going to walk through using a package called react-icons that will allow us to easily import icons from popular icon sets like Font Awesome right into our app. This makes them extra flexible for web usage, especially when making experiences responsive. Typically when using SVG, you can take advantage of its smaller size compared to larger image files that might be required to deliver the same high resolution.Īdditionally, since we’re defining SVG as paths, they can scale as large or as small as we want. This plays a part in the small file size.
If you open an SVG file on your computer, you might be surprised to find that it’s all code! It’s an open standard that was created by W3C to provide a better way to add images to the web. It’s a file format based on a markup language similar to XML that allows developers and designers to create vector-based images using path definitions.
0 kommentar(er)
