React · Theory

React Icons

Theory

50/94

React Icons

react-icons (and similar) export SVG components. Import one icon, not the whole pack, or the bundle grows. Give aria-label if there’s no visible text. PNG sprites are last century for UI icons.

React Icons — on screen — heart icon. Tree-shake by importing one icon, not the whole pack.

Exam tip

Tree-shake icons. Label them.

Example

// react-icons
import { FaHeart } from "react-icons/fa";

export default function Like() {
  return <FaHeart aria-label="like" />;
}

React Icons — on screen: heart icon. Tree-shake by importing one icon, not the whole pack.

Short notes

DefImport one icon.
RuleSVG component.
RememberA11y : label.

React · Theory

React Icons

← All stacks

Theory

50/94

React Icons

react-icons (and similar) export SVG components. Import one icon, not the whole pack, or the bundle grows. Give aria-label if there’s no visible text. PNG sprites are last century for UI icons.

React Icons — on screen — heart icon. Tree-shake by importing one icon, not the whole pack.

Exam tip

Tree-shake icons. Label them.

Example

// react-icons
import { FaHeart } from "react-icons/fa";

export default function Like() {
  return <FaHeart aria-label="like" />;
}

React Icons — on screen: heart icon. Tree-shake by importing one icon, not the whole pack.

Short notes

DefImport one icon.
RuleSVG component.
RememberA11y : label.

React Icons

Example

Short notes

Questions

React Icons

Example

Short notes

Questions