Resize Home core value icons

[michulee]

18d4957
use .svg-inline--fa to directly target icon

when using class={}, icon auto fills the container but can't resize with .core-icons class

[michulee]

This issue is for the core values section on index.js.

When using className, you are able to resize the icon.
<FontAwesomeIcon icon={faHandshake} className={clsx("core-icons")}/>

However, when using class, classes don't work and the icon fills its container. This seems to effect only <FontAwesomeIcon />.
<FontAwesomeIcon icon={faHandshake} class={clsx()}/>

Should we use className for everything, or should we use only className just for <FontAwesomeIcon />? I made notes in the documentation about class and className.

When it comes to React, you CAN use className instead of class ; there's no functional difference. The reason for this decision was because of the definition of a keyword. Because class is native to JavaScript, you use className for JSX. There doesn't seem to be any functional changes except that the keywords are named differently.

class is a keyword in JavaScript and JSX is an extension of JavaScript. A keyword means that a token has a special meaning in a language syntax.

• https://stackoverflow.com/a/46991278

It also seems that clsx is faster than classnames .

• Update the package using the clsx implementation? JedWatson/classnames#187

The developers of React were going to make className → class after many requests, but this issue was shelved due to "syntax limitations" (Aug 2020). For legacy purposes, it's best to use class because the team at React are serious about this issue.

• React Fire: Modernizing React DOM facebook/react#13525 (comment)

Issue has been fixed. 8f230e3