JSPM

  • Created
  • Published
  • Downloads 371
  • Score
    100M100P100Q85155F

React Icons

Package Exports

  • @webjet/react-icons/common/arrow-left
  • @webjet/react-icons/common/arrow-left.js
  • @webjet/react-icons/common/arrow-right
  • @webjet/react-icons/common/arrow-right.js
  • @webjet/react-icons/common/caret-down
  • @webjet/react-icons/common/caret-down.js
  • @webjet/react-icons/common/caret-left
  • @webjet/react-icons/common/caret-left.js
  • @webjet/react-icons/common/caret-right
  • @webjet/react-icons/common/caret-right.js
  • @webjet/react-icons/common/cross
  • @webjet/react-icons/common/cross-bold
  • @webjet/react-icons/common/cross-bold.js
  • @webjet/react-icons/common/cross.js
  • @webjet/react-icons/common/tick
  • @webjet/react-icons/common/tick-bold
  • @webjet/react-icons/common/tick-bold.js
  • @webjet/react-icons/common/tick.js
  • @webjet/react-icons/common/x-circle-fill
  • @webjet/react-icons/common/x-circle-fill.js
  • @webjet/react-icons/widget/calendar
  • @webjet/react-icons/widget/calendar.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@webjet/react-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Icons

Getting started

> npm i

> npm start

How to convert add Webjet font icon into SVG Icon Library

  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>
  1. 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.
  2. After finish adjusting the icon, please export file as SVG using figma

How to export svg icon from figma and add into SVG Icon Library

  1. In icon figma file, select 16x16 icon you want to download.

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

  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>
  1. 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>
  1. Add this file under /src/icons/[category] folder.