![]() To ensure your logo design works in different mediums, here’s a list of logo size guidelines so you can display your brand seamlessly across the web, social media, print, and more. ![]() Having easy-to-resize PNG and vector logo files will help you adapt them accordingly. For example, a YouTube profile photo is 800 x 800 pixels, whereas the logo size for a website or email signature usually has a maximum height of 100 pixels. The standard size of a logo depends on the platform you’re uploading it to. When you embark on your branding journey, you may be wondering, “What size should my logo be?” If using a new create-react-app project, you can add it to the top of src/App.js.A logo has a massive impact on the perception of your company, so it’s crucial to keep it looking crisp wherever it’s used. Similar to the instructions at the top of the react-icons page, we want to import that specific icon from the react-icons/fa, which refers to the Font Awesome module of react-icons.Īdd the following to the top of the file you want to import the icon in. Inside of our project, we can now import that icon. We could also search for “rocket” in the search form at the top left of the page, which shows us the result “rocket” throughout all icon sets. If we wanted to use the Font Awesome rocket icon, we can navigate to Font Awesome in the sidebar, search the page for “rocket” (CMD+F or CTRL+F), and then click the icon which will copy its name to your clipboard. React-icons’s website makes it easy for us to look up the name of the icon we want to use to import to our project. Once you’ve found the icons you want to use, we can now add them to our project. ![]() You ultimately want to provide an experience that people will be able to easily identify the patterns that you create. If you primarily use Font Awesome for your website, it might look a bit strange and inconsistent if you were to start adding Flat Color Icons to the mix. That said, I would recommend trying to keep a consistent look and feel with your icons. When choosing icons, you pretty much have the ability to use any icon you want at any time. Not only do we have Font Awesome immediately available, we have GitHub’s Octicons, Heroicons, Material Design Icons, and a whole bunch more. 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. Part 2: Manually adding SVG files to a React component.Part 1: Adding SVG icons with react-icons.How can we add icons using SVG to our React apps to improve our visual communication? This could be for categorization, an action, or even a warning. Icons are a way to visually communicate concepts and meaning without the use of words.
0 Comments
Leave a Reply. |