Icon

The Icon component isn’t really a visual editing component—rather, it renders an SVG icon that users choose through a sidebar IconSelector control.

The component accepts an icon prop of type Icon, matching what’s returned by an IconSelector sidebar control. By rendering an inline <svg>, it offers both performance (avoiding GET requests) and flexibility. You can customize it with any className, width, height, or other SVG props, and even preprocess the file before rendering.

Usage Example

// Import from 'react-bricks/rsc/client' for Server components
import { Icon } from 'react-bricks/frontend'
...

<Icon
  icon={icon}
  width={32}
  height={32}
  className="text-pink-500 hover:text-pink-700"
  title="My Icon"
  description="Description for my Icon"
  fillOpacity={0.5}
/>

Properties

Here’s the (simplified) TypeScript interface for the props of the Icon component, which inherits all the props of a normal SVG, like className, width, height, etc.:

interface IconProps extends React.SVGProps<SVGElement> {
  icon: types.Icon
  description?: string
  preProcessor?: (code: string) => string
  title?: string | null
}

Properties definition

Property	Definition
icon	The icon object of type Icon, typically set by a sideEditProp of type IconSelector.
description	Optional description. It will override an existing <desc> tag
preProcessor	A function to process the contents of the SVG text before parsing.
title	Optional title. It will override an existing <title> tag. If null is passed, the <title> tag will be removed.

Preprocessor example

Here’s an example of using preProcessor to process the SVG content.

preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}

In case of icons from an IconSelector the previous code would not be needed, as icons have already fill="currentColor" for any path.