import logo from "thesvg/lovable"import { BrandSvg } from "@/components/ui/brand-svg"export function Logo() { return <BrandSvg svg={logo.svg} label="Lovable" />}
Pass trusted markup from a build-time package. This component does not sanitize SVG or HTML. Never pass user input, database markup or fetched SVG strings. It keeps the supplied colours and dimensions. Choose the package's mono or dark variant before passing the SVG.
Every instance prefixes IDs and local url(#id), href, xlink:href, aria-labelledby and aria-describedby references. Repeated marks keep their own gradients and masks. External URLs and colour values stay unchanged. Style elements are rejected because CSS ID selectors cannot be safely rewritten with this attribute-based parser. Use SVG presentation attributes. SMIL animation references are outside this contract.
Omit label for decorative marks beside a visible name. A labelled wrapper gets an image role. The inner SVG is always hidden from assistive technology and cannot receive focus. className and style apply to the wrapper. The component has no Tailwind or Another UI stylesheet dependency, so it can also be installed into existing apps on an older Tailwind version. Separate React roots should set distinct identifierPrefix values when creating or hydrating their roots.
SVG title elements stay intact and may show the package's native hover tooltip, even when the wrapper has a label. ARIA references are retained and namespaced to preserve valid source relationships, although the inner SVG is hidden from assistive technology.
Sizing the wrapper does not resize package SVG dimensions. Use a child selector such as className="inline-flex size-6 [&>svg]:size-full", or pass a prepared SVG with the dimensions you need.
Style elements throw a descriptive render error. Validate a package upgrade against the fixture test before shipping and wrap BrandSvg in your app's error boundary if package markup can change independently of your release. SMIL references and xml:id are unsupported. This is a trusted icon renderer, not a general XML processor.
The fixture in tests/fixtures/brand-svg.json records the 24 selected SVG variants from thesvg 3.3.12. Refresh it and run pnpm --filter=v4 test:brand-svg when changing the supplied icon package or variants.