Ícones SVG Personalizados em React

Q: Quais são as três abordagens principais para usar ícones SVG personalizados em React?

Componentes SVG inline -- escreva o markup SVG diretamente em um componente React para controle total. SVGR -- importe arquivos .svg como componentes React através de um loader webpack. Sprites SVG -- referencie ícones de um único arquivo sprite usando .

Q: Como currentColor faz com que os ícones SVG funcionem com as classes de cor de texto do Tailwind?

Definir stroke="currentColor" faz com que o ícone herde a propriedade CSS color do pai. Aplique className="text-blue-500" no pai ou no ícone, e a cor do traço é atualizada automaticamente.

Q: Como você lida com a acessibilidade para ícones SVG decorativos versus informativos?

Ícones decorativos: defina aria-hidden="true" e omita role. Ícones informativos: defina role="img" e forneça aria-label com uma descrição. O exemplo verifica se uma prop label é fornecida para decidir.

Q: Armadilha: O que acontece se você remover viewBox ao otimizar SVGs com SVGO?

Remover viewBox quebra completamente o comportamento de dimensionamento. O ícone não redimensionará corretamente com mudanças de width/height. Configure SVGO com { name: "removeViewBox", active: false }.

Q: Como configurar o SVGR para importar arquivos .svg como componentes React no Next.js?

Então: import Logo from "@/public/icons/logo.svg";

Q: Como funciona a abordagem de sprite SVG e qual é sua limitação com currentColor?

Ícones são definidos como elementos em um único arquivo SVG. Componentes os referenciam com . currentColor não funciona para sprites de origem cruzada; o sprite deve estar no mesmo domínio.

Q: Armadilha: Quais são os valores padrão para fill e stroke em SVG?

Ambos têm o valor padrão black. Para ícones baseados em traço, defina explicitamente fill="none". Para ícones preenchidos, defina explicitamente stroke="none". Esquecer isso causa preenchimentos ou traços pretos inesperados.

Q: Por que os atributos SVG usam camelCase em JSX?

React requer camelCase para propriedades DOM: strokeWidth em vez de stroke-width, viewBox em vez de viewbox. Usar kebab-case aciona avisos do React sobre propriedades inválidas do DOM.

Receita

Crie componentes de ícones SVG reutilizáveis e acessíveis em React. Use SVG inline para controle total, SVGR para importar arquivos .svg como componentes, ou um sprite SVG para desempenho otimizado com muitos ícones.

SVG inline como um componente:

// components/icons/check-icon.tsx
interface IconProps {
  size?: number;
  color?: string;
  className?: string;
  "aria-label"?: string;
}
 
export function CheckIcon({ size = 24, color = "currentColor", className, ...props }: IconProps) {
  const isDecorative = !props["aria-label"];
 
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      role={isDecorative ? undefined : "img"}
      aria-hidden={isDecorative ? true : undefined}
      aria-label={props["aria-label"]}
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

Exemplo de Trabalho

Uma biblioteca de componentes de conjunto de ícones personalizados com API e acessibilidade consistentes:

// components/icons/icon.tsx
import { type SVGProps } from "react";
 
export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "children"> {
  size?: number;
  label?: string;
}
 
function createIcon(path: React.ReactNode, displayName: string) {
  function Icon({ size = 24, label, className, ...props }: IconProps) {
    const isDecorative = !label;
 
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
        className={className}
        role={isDecorative ? undefined : "img"}
        aria-hidden={isDecorative ? true : undefined}
        aria-label={label}
        {...props}
      >
        {path}
      </svg>
    );
  }
 
  Icon.displayName = displayName;
  return Icon;
}
 
// Define ícones
export const ArrowRight = createIcon(
  <line x1="5" y1="12" x2="19" y2="12"><polyline points="12 5 19 12 12 19" /></line>,
  "ArrowRight"
);
 
export const Close = createIcon(
  <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
  "Close"
);
 
export const Heart = createIcon(
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />,
  "Heart"
);
 
export const Star = createIcon(
  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
  "Star"
);
 
export const Search = createIcon(
  <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
  "Search"
);
 
export const Menu = createIcon(
  <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>,
  "Menu"
);

// app/components/icon-showcase.tsx
"use client";
 
import { useState } from "react";
import { ArrowRight, Close, Heart, Star, Search, Menu } from "@/components/icons/icon";
import type { IconProps } from "@/components/icons/icon";
 
const icons = [
  { component: ArrowRight, name: "ArrowRight" },
  { component: Close, name: "Close" },
  { component: Heart, name: "Heart" },
  { component: Star, name: "Star" },
  { component: Search, name: "Search" },
  { component: Menu, name: "Menu" },
];
 
export function IconShowcase() {
  const [iconSize, setIconSize] = useState(24);
  const [iconColor, setIconColor] = useState("#374151");
 
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-6">
        <label className="flex items-center gap-2 text-sm">
          Tamanho:
          <input
            type="range"
            min={16}
            max={48}
            value={iconSize}
            onChange={(e) => setIconSize(Number(e.target.value))}
            className="w-32"
          />
          <span className="w-8 text-right">{iconSize}</span>
        </label>
        <label className="flex items-center gap-2 text-sm">
          Cor:
          <input
            type="color"
            value={iconColor}
            onChange={(e) => setIconColor(e.target.value)}
            className="h-8 w-8 cursor-pointer"
          />
        </label>
      </div>
 
      <div className="grid grid-cols-3 gap-4 sm:grid-cols-6">
        {icons.map(({ component: Icon, name }) => (
          <div
            key={name}
            className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4"
          >
            <Icon size={iconSize} color={iconColor} label={name} />
            <span className="text-xs text-gray-500">{name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Análise Detalhada

Como Funciona

SVG inline é renderizado diretamente no DOM, permitindo controle total via CSS e JavaScript sobre traço, preenchimento, animações e estados de hover.
O valor currentColor faz com que os ícones SVG herdem a propriedade CSS color do elemento pai, permitindo a estilização com classes de cor de texto do Tailwind.
O atributo viewBox="0 0 24 24" define o espaço de coordenadas. Os atributos width e height controlam o tamanho renderizado independentemente.
A função fábrica createIcon mantém a API consistente entre todos os ícones, evitando a repetição de boilerplate.
Para acessibilidade, os ícones são decorativos (aria-hidden="true") ou informativos (role="img" com aria-label).

Variações

SVGR para importar arquivos .svg como componentes React:

npm install @svgr/webpack

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [{ name: "removeViewBox", active: false }],
            },
          },
        },
      ],
    });
    return config;
  },
};
 
export default nextConfig;

// Agora importe SVGs como componentes
import Logo from "@/public/icons/logo.svg";
 
export function Header() {
  return <Logo className="h-8 w-8 text-blue-600" />;
}

Abordagem de sprite SVG para muitos ícones:

// public/icons/sprite.svg
// <svg xmlns="http://www.w3.org/2000/svg">
//   <symbol id="icon-check" viewBox="0 0 24 24">
//     <polyline points="20 6 9 17 4 12" />
//   </symbol>
//   <symbol id="icon-close" viewBox="0 0 24 24">
//     <line x1="18" y1="6" x2="6" y2="18" />
//     <line x1="6" y1="6" x2="18" y2="18" />
//   </symbol>
// </svg>
 
interface SpriteIconProps {
  name: string;
  size?: number;
  className?: string;
  label?: string;
}
 
export function SpriteIcon({ name, size = 24, className, label }: SpriteIconProps) {
  return (
    <svg
      width={size}
      height={size}
      className={className}
      role={label ? "img" : undefined}
      aria-hidden={label ? undefined : true}
      aria-label={label}
    >
      <use href={`/icons/sprite.svg#icon-${name}`} />
    </svg>
  );
}
 
// Uso: <SpriteIcon name="check" size={20} className="text-green-500" />

Notas de TypeScript

Estenda SVGProps<SVGSVGElement> para permitir todos os atributos SVG nativos em seus componentes de ícone.
Use a utilidade Omit para remover children das props do SVG, já que o conteúdo do ícone é fixo.
Para SVGR, adicione um arquivo de declaração de tipo para que o TypeScript entenda as importações de .svg.

// types/svg.d.ts
declare module "*.svg" {
  import type { FC, SVGProps } from "react";
  const content: FC<SVGProps<SVGSVGElement>>;
  export default content;
}

Armadilhas

Atributos SVG em JSX usam camelCase (strokeWidth, viewBox, fillRule) em vez de kebab-case. Caso contrário, o React avisará sobre propriedades inválidas do DOM.
Sempre preserve o atributo viewBox ao otimizar SVGs com SVGO. Removê-lo quebra o comportamento de dimensionamento.
As propriedades fill e stroke têm o valor padrão black em SVG. Defina fill="none" para ícones baseados em traço ou stroke="none" para ícones preenchidos explicitamente.
SVGR adiciona um elemento title por padrão, que cria uma tooltip ao passar o mouse. Desative-o com titleProp: false na configuração do SVGR, se indesejado.
Sprites SVG carregados via use href não suportam currentColor do CSS para sprites de origem cruzada. O sprite deve estar no mesmo domínio.
SVGs inline aumentam o tamanho do documento HTML. Para páginas com centenas de ícones, considere sprites ou uma fonte de ícones.

Alternativas

Abordagem	Prós	Contras
Componentes SVG inline	Controle total, tree-shakeable, estilização CSS	Verboso, aumenta o bundle por ícone
Importações SVGR	Use arquivos .svg diretamente, otimização automática	Requer configuração webpack, etapa de build
Sprites SVG	Requisição única para todos os ícones, cache	Sem tree-shaking, gerenciamento manual de sprites
Fontes de ícones	Bundle minúsculo, uso familiar de CSS	Borrado em tamanhos pequenos, estilo limitado
Bibliotecas de ícones (Lucide)	Pronto, consistente, bem mantido	Dependência externa, menos controle

FAQs

Quais são as três abordagens principais para usar ícones SVG personalizados em React?

Componentes SVG inline -- escreva o markup SVG diretamente em um componente React para controle total.
SVGR -- importe arquivos .svg como componentes React através de um loader webpack.
Sprites SVG -- referencie ícones de um único arquivo sprite usando <use href>.

Como `currentColor` faz com que os ícones SVG funcionem com as classes de cor de texto do Tailwind?

Definir stroke="currentColor" faz com que o ícone herde a propriedade CSS color do pai.
Aplique className="text-blue-500" no pai ou no ícone, e a cor do traço é atualizada automaticamente.

O que a função fábrica `createIcon` faz no exemplo?

Ela envolve os dados do caminho SVG em um componente consistente com props size, label e className.
Evita a repetição de boilerplate de atributos SVG em cada ícone.
Cada ícone recebe um displayName para o React DevTools.

Como você lida com a acessibilidade para ícones SVG decorativos versus informativos?

Ícones decorativos: defina aria-hidden="true" e omita role.
Ícones informativos: defina role="img" e forneça aria-label com uma descrição.
O exemplo verifica se uma prop label é fornecida para decidir.

Armadilha: O que acontece se você remover `viewBox` ao otimizar SVGs com SVGO?

Remover viewBox quebra completamente o comportamento de dimensionamento.
O ícone não redimensionará corretamente com mudanças de width/height.
Configure SVGO com { name: "removeViewBox", active: false }.

Como configurar o SVGR para importar arquivos `.svg` como componentes React no Next.js?

// next.config.ts
webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: [{ loader: "@svgr/webpack" }],
  });
  return config;
}

Então: import Logo from "@/public/icons/logo.svg";

Qual declaração TypeScript é necessária para importações de arquivos `.svg` com SVGR?

// types/svg.d.ts
declare module "*.svg" {
  import type { FC, SVGProps } from "react";
  const content: FC<SVGProps<SVGSVGElement>>;
  export default content;
}

Como funciona a abordagem de sprite SVG e qual é sua limitação com `currentColor`?

Ícones são definidos como elementos <symbol> em um único arquivo SVG.
Componentes os referenciam com <use href="/icons/sprite.svg#icon-name">.
currentColor não funciona para sprites de origem cruzada; o sprite deve estar no mesmo domínio.

Armadilha: Quais são os valores padrão para `fill` e `stroke` em SVG?

Ambos têm o valor padrão black.
Para ícones baseados em traço, defina explicitamente fill="none".
Para ícones preenchidos, defina explicitamente stroke="none".
Esquecer isso causa preenchimentos ou traços pretos inesperados.

Por que os atributos SVG usam camelCase em JSX?

React requer camelCase para propriedades DOM: strokeWidth em vez de stroke-width, viewBox em vez de viewbox.
Usar kebab-case aciona avisos do React sobre propriedades inválidas do DOM.

Quando você deve usar sprites SVG em vez de componentes SVG inline?

Quando uma página usa centenas de ícones, SVGs inline aumentam significativamente o tamanho do documento HTML.
Sprites carregam todos os ícones em uma única requisição e são cacheados pelo navegador.
Contrapartida: sprites não suportam tree-shaking.

Como você tipa uma prop de componente de ícone que estende todos os atributos SVG?

export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "children"> {
  size?: number;
  label?: string;
}

Use Omit para remover children, pois o conteúdo do ícone é fixo.

Links Relacionados

Receita

SVG inline como um componente:

// components/icons/check-icon.tsx
interface IconProps {
  size?: number;
  color?: string;
  className?: string;
  "aria-label"?: string;
}
 
export function CheckIcon({ size = 24, color = "currentColor", className, ...props }: IconProps) {
  const isDecorative = !props["aria-label"];
 
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      role={isDecorative ? undefined : "img"}
      aria-hidden={isDecorative ? true : undefined}
      aria-label={props["aria-label"]}
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

Exemplo de Trabalho

Uma biblioteca de componentes de conjunto de ícones personalizados com API e acessibilidade consistentes:

// components/icons/icon.tsx
import { type SVGProps } from "react";
 
export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "children"> {
  size?: number;
  label?: string;
}
 
function createIcon(path: React.ReactNode, displayName: string) {
  function Icon({ size = 24, label, className, ...props }: IconProps) {
    const isDecorative = !label;
 
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
        className={className}
        role={isDecorative ? undefined : "img"}
        aria-hidden={isDecorative ? true : undefined}
        aria-label={label}
        {...props}
      >
        {path}
      </svg>
    );
  }
 
  Icon.displayName = displayName;
  return Icon;
}
 
// Define ícones
export const ArrowRight = createIcon(
  <line x1="5" y1="12" x2="19" y2="12"><polyline points="12 5 19 12 12 19" /></line>,
  "ArrowRight"
);
 
export const Close = createIcon(
  <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
  "Close"
);
 
export const Heart = createIcon(
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />,
  "Heart"
);
 
export const Star = createIcon(
  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
  "Star"
);
 
export const Search = createIcon(
  <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
  "Search"
);
 
export const Menu = createIcon(
  <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>,
  "Menu"
);

// app/components/icon-showcase.tsx
"use client";
 
import { useState } from "react";
import { ArrowRight, Close, Heart, Star, Search, Menu } from "@/components/icons/icon";
import type { IconProps } from "@/components/icons/icon";
 
const icons = [
  { component: ArrowRight, name: "ArrowRight" },
  { component: Close, name: "Close" },
  { component: Heart, name: "Heart" },
  { component: Star, name: "Star" },
  { component: Search, name: "Search" },
  { component: Menu, name: "Menu" },
];
 
export function IconShowcase() {
  const [iconSize, setIconSize] = useState(24);
  const [iconColor, setIconColor] = useState("#374151");
 
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-6">
        <label className="flex items-center gap-2 text-sm">
          Tamanho:
          <input
            type="range"
            min={16}
            max={48}
            value={iconSize}
            onChange={(e) => setIconSize(Number(e.target.value))}
            className="w-32"
          />
          <span className="w-8 text-right">{iconSize}</span>
        </label>
        <label className="flex items-center gap-2 text-sm">
          Cor:
          <input
            type="color"
            value={iconColor}
            onChange={(e) => setIconColor(e.target.value)}
            className="h-8 w-8 cursor-pointer"
          />
        </label>
      </div>
 
      <div className="grid grid-cols-3 gap-4 sm:grid-cols-6">
        {icons.map(({ component: Icon, name }) => (
          <div
            key={name}
            className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4"
          >
            <Icon size={iconSize} color={iconColor} label={name} />
            <span className="text-xs text-gray-500">{name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Análise Detalhada

Como Funciona

SVG inline é renderizado diretamente no DOM, permitindo controle total via CSS e JavaScript sobre traço, preenchimento, animações e estados de hover.
O valor currentColor faz com que os ícones SVG herdem a propriedade CSS color do elemento pai, permitindo a estilização com classes de cor de texto do Tailwind.
O atributo viewBox="0 0 24 24" define o espaço de coordenadas. Os atributos width e height controlam o tamanho renderizado independentemente.
A função fábrica createIcon mantém a API consistente entre todos os ícones, evitando a repetição de boilerplate.
Para acessibilidade, os ícones são decorativos (aria-hidden="true") ou informativos (role="img" com aria-label).

Variações

SVGR para importar arquivos .svg como componentes React:

npm install @svgr/webpack

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [{ name: "removeViewBox", active: false }],
            },
          },
        },
      ],
    });
    return config;
  },
};
 
export default nextConfig;

// Agora importe SVGs como componentes
import Logo from "@/public/icons/logo.svg";
 
export function Header() {
  return <Logo className="h-8 w-8 text-blue-600" />;
}

Abordagem de sprite SVG para muitos ícones:

// public/icons/sprite.svg
// <svg xmlns="http://www.w3.org/2000/svg">
//   <symbol id="icon-check" viewBox="0 0 24 24">
//     <polyline points="20 6 9 17 4 12" />
//   </symbol>
//   <symbol id="icon-close" viewBox="0 0 24 24">
//     <line x1="18" y1="6" x2="6" y2="18" />
//     <line x1="6" y1="6" x2="18" y2="18" />
//   </symbol>
// </svg>
 
interface SpriteIconProps {
  name: string;
  size?: number;
  className?: string;
  label?: string;
}
 
export function SpriteIcon({ name, size = 24, className, label }: SpriteIconProps) {
  return (
    <svg
      width={size}
      height={size}
      className={className}
      role={label ? "img" : undefined}
      aria-hidden={label ? undefined : true}
      aria-label={label}
    >
      <use href={`/icons/sprite.svg#icon-${name}`} />
    </svg>
  );
}
 
// Uso: <SpriteIcon name="check" size={20} className="text-green-500" />

Notas de TypeScript

Estenda SVGProps<SVGSVGElement> para permitir todos os atributos SVG nativos em seus componentes de ícone.
Use a utilidade Omit para remover children das props do SVG, já que o conteúdo do ícone é fixo.
Para SVGR, adicione um arquivo de declaração de tipo para que o TypeScript entenda as importações de .svg.

// types/svg.d.ts
declare module "*.svg" {
  import type { FC, SVGProps } from "react";
  const content: FC<SVGProps<SVGSVGElement>>;
  export default content;
}

Armadilhas

Atributos SVG em JSX usam camelCase (strokeWidth, viewBox, fillRule) em vez de kebab-case. Caso contrário, o React avisará sobre propriedades inválidas do DOM.
Sempre preserve o atributo viewBox ao otimizar SVGs com SVGO. Removê-lo quebra o comportamento de dimensionamento.
As propriedades fill e stroke têm o valor padrão black em SVG. Defina fill="none" para ícones baseados em traço ou stroke="none" para ícones preenchidos explicitamente.
SVGR adiciona um elemento title por padrão, que cria uma tooltip ao passar o mouse. Desative-o com titleProp: false na configuração do SVGR, se indesejado.
Sprites SVG carregados via use href não suportam currentColor do CSS para sprites de origem cruzada. O sprite deve estar no mesmo domínio.
SVGs inline aumentam o tamanho do documento HTML. Para páginas com centenas de ícones, considere sprites ou uma fonte de ícones.

Alternativas

Abordagem	Prós	Contras
Componentes SVG inline	Controle total, tree-shakeable, estilização CSS	Verboso, aumenta o bundle por ícone
Importações SVGR	Use arquivos .svg diretamente, otimização automática	Requer configuração webpack, etapa de build
Sprites SVG	Requisição única para todos os ícones, cache	Sem tree-shaking, gerenciamento manual de sprites
Fontes de ícones	Bundle minúsculo, uso familiar de CSS	Borrado em tamanhos pequenos, estilo limitado
Bibliotecas de ícones (Lucide)	Pronto, consistente, bem mantido	Dependência externa, menos controle

FAQs

Quais são as três abordagens principais para usar ícones SVG personalizados em React?

Componentes SVG inline -- escreva o markup SVG diretamente em um componente React para controle total.
SVGR -- importe arquivos .svg como componentes React através de um loader webpack.
Sprites SVG -- referencie ícones de um único arquivo sprite usando <use href>.

Como `currentColor` faz com que os ícones SVG funcionem com as classes de cor de texto do Tailwind?

Definir stroke="currentColor" faz com que o ícone herde a propriedade CSS color do pai.
Aplique className="text-blue-500" no pai ou no ícone, e a cor do traço é atualizada automaticamente.

O que a função fábrica `createIcon` faz no exemplo?

Ela envolve os dados do caminho SVG em um componente consistente com props size, label e className.
Evita a repetição de boilerplate de atributos SVG em cada ícone.
Cada ícone recebe um displayName para o React DevTools.

Como você lida com a acessibilidade para ícones SVG decorativos versus informativos?

Ícones decorativos: defina aria-hidden="true" e omita role.
Ícones informativos: defina role="img" e forneça aria-label com uma descrição.
O exemplo verifica se uma prop label é fornecida para decidir.

Armadilha: O que acontece se você remover `viewBox` ao otimizar SVGs com SVGO?

Remover viewBox quebra completamente o comportamento de dimensionamento.
O ícone não redimensionará corretamente com mudanças de width/height.
Configure SVGO com { name: "removeViewBox", active: false }.

Como configurar o SVGR para importar arquivos `.svg` como componentes React no Next.js?

// next.config.ts
webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: [{ loader: "@svgr/webpack" }],
  });
  return config;
}

Então: import Logo from "@/public/icons/logo.svg";

Qual declaração TypeScript é necessária para importações de arquivos `.svg` com SVGR?

// types/svg.d.ts
declare module "*.svg" {
  import type { FC, SVGProps } from "react";
  const content: FC<SVGProps<SVGSVGElement>>;
  export default content;
}

Como funciona a abordagem de sprite SVG e qual é sua limitação com `currentColor`?

Ícones são definidos como elementos <symbol> em um único arquivo SVG.
Componentes os referenciam com <use href="/icons/sprite.svg#icon-name">.
currentColor não funciona para sprites de origem cruzada; o sprite deve estar no mesmo domínio.

Armadilha: Quais são os valores padrão para `fill` e `stroke` em SVG?

Ambos têm o valor padrão black.
Para ícones baseados em traço, defina explicitamente fill="none".
Para ícones preenchidos, defina explicitamente stroke="none".
Esquecer isso causa preenchimentos ou traços pretos inesperados.

Por que os atributos SVG usam camelCase em JSX?

React requer camelCase para propriedades DOM: strokeWidth em vez de stroke-width, viewBox em vez de viewbox.
Usar kebab-case aciona avisos do React sobre propriedades inválidas do DOM.

Quando você deve usar sprites SVG em vez de componentes SVG inline?

Quando uma página usa centenas de ícones, SVGs inline aumentam significativamente o tamanho do documento HTML.
Sprites carregam todos os ícones em uma única requisição e são cacheados pelo navegador.
Contrapartida: sprites não suportam tree-shaking.

Como você tipa uma prop de componente de ícone que estende todos os atributos SVG?

export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "children"> {
  size?: number;
  label?: string;
}

Use Omit para remover children, pois o conteúdo do ícone é fixo.

Ícones SVG Personalizados em React

Buscar na documentação

Ícones SVG Personalizados em React