Font Awesome Icons

A Font Awesome Icon free icon pack is included, removing the need to set up your own kit in Font Awesome.

To add more icons:

1. Go to the Font Awesome icon list
2. Pick a free icon
3. Go to src/components/utility/icon.jsx
4. Import the component from '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', or '@fortawesome/free-brands-svg-icons', depending on which kind of icon it is. Tip: After entering ‘fa’ into one of the destructured objects, you should see an autocomplete dropdown list to help you with the correct syntax.
5. Add another case to the switch statement following the format the other icons use.
6. Add the name you just used in the conditional of the switch statement to data/icons.json, which populates the icon dropdown list used for icons in the placeholder components.

To remove Font Awesome Icons:

1. Remove the following packages from your package.json:

  {
    "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^6.5.2",
      "@fortawesome/free-brands-svg-icons": "^6.5.2",
      "@fortawesome/free-regular-svg-icons": "^6.5.2",
      "@fortawesome/free-solid-svg-icons": "^6.5.2",
      "@fortawesome/react-fontawesome": "^0.2.0"
    }
  }

2. Remove src/components/utility/icon.jsx
3. Remove any imports of the icon

import Icon from '../utility/Icon';

4. Remove icons.json
5. Remove any select inputs that were using the icon

icon:
  type: select
  options:
    values: data.icons

6. Remove icons from your defined data in cloudcannon.config.yml

data_config:
  icons:
    path: data/icons.json