@webjet/react-icons v3.6.0

React Icons

Getting started

> npm i

> npm start

Export svg icon from figma and import it to UI-IconsLibrary repo

1. In icon figma file, select 16x16 icon you want to download. Note: It's important to select the Icon layer size 16x16 from they figma file

2. Open Export tab, select option 'SVG' from dropdown and click the Export button at the right hand side.

3. Open downloaded SVG file using Visual Code, it will have something like below:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="black"/>
</svg>

4. Remove change width and height to be 1em, change svg fill to be #646464 and remove fill="black" from the end of <path>. It should look like this.

<svg width="1em" height="1em" viewBox="0 0 16 16" fill="#646464" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
</svg>

5. Add this file under /src/icons/category folder.

How to convert Webjet-Font icon to UI-IconsLibrary repo

1. Open file UIPatternLibraries/src/Webjet/fonts/webjet-icons.svg
2. Open https://services.webjet.com.au/web/ui/uipatternlibrary/patterns/webjet/icons-images.html
3. Find the icon that you want to add into library, and find the icon hexadecimal value (from the icon's css content property)
4. Search for the hexadecimal value from webjet-icons.svg, and copy the value inside d= attribute
5. Create new svg file with below content, and change the d= value with the copied value from previous step

<svg width="2048" height="2048" viewBox="0 0 2048 2048" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="" fill="#646464"/>
</svg>

6. Bring the file into figma. Atm The file is very big, and we want to reduce the size to be 16x16 OR 32x32 pixels only. Please adjust this using figma so the icon fit into the viewBox nicely.
7. After finish adjusting the icon, please export file as SVG using figma