inline-svg

An SVG drawn inline in component source.

Group

Text

Runs

Optional: run it with ur lint --rule inline-svg

Level

warning

Reads

Every file

Fix

None: the icon component's name and home are the author's to choose

Why

The line draws an SVG inside component source, as an <svg> element or createElement("svg"). An icon drawn where it is used is copied to the next place that needs it. Put it in a named icon component and use that. The rule reads component source as Straitjacket's inline-svg rule reads it, and runs where [lint.inline-svg] turns it on.

The fix, as Ur suggests it: extract it into a named, reusable icon component.

For agents

Draw no SVG inline in component source; put it in a named, reusable icon component.

export function CartButton({ count }: { count: number }) {
  return (
    <button className="cart-button" aria-label="Open cart">
      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 3h2l3 12h11l2-8H6" fill="none" stroke="currentColor" />
      </svg>
      <span>{count}</span>
    </button>
  );
}

$ ur lint --rule inline-svg
warning[inline-svg]: inline SVG `<svg `
  --> ./src/components/CartButton.tsx:4:7 `<svg `
  = hint: extract it into a named, reusable icon component
0 clone classes and 1 text finding in 1 file