Skip to main content

Icons

note

Icons are applicable to Checkbox and Radio only

Icon in the generic sense can mean by image, svg, or font icon kit. PCR works with all three ๐ŸŽ‰ and the usage is incredibly simple using the icon prop! Supported elements are:

  • i
  • em
  • svg
  • img

How it Works#

PCR attempts to get the type of the component. For "primitive" HTML types (e.g. i, svg, etc.) PCR can add className for you by cloning the element.

Confused? It helps to see what our sweet JSX syntax is converted to:

const icon = React.createElement('i', { className: 'mdi mdi-check' });console.assert(icon.type === 'i');

PCR leverages the .type field of components to decide if it's something that can be cloned with predictable results:

const icon = React.createElement('i', { className: 'mdi mdi-check' });
const newIcon = React.cloneElement(icon, {    ...icon.props,    // merge classNames with icon    className: icon.props.className + ' icon';});

Gotchas#

This process works with HTML elements. PCR cannot clone components with any certainty so you must add two props yourself with one of the following values: svg, image, or icon.

  • className
  • data-type
import React from 'react';import { Check } from 'react-feather';
function App() {    return (        <Checkbox icon={<Check className="svg" data-type="svg" />}>react-feather check</Checkbox>    );}

Icons#

PCR takes the heavy lifting of adding icons for you. Use i or em elements and add your selectors; PCR takes care of the rest ๐Ÿ˜Ž

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Supported Icon Libraries#

Pretty Checkbox has been tested with the following font icons libraries:

SVG#

Like icons, svg elements can be used, too.

Using with SVG Components

See the gotchas section.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Supported SVG Libraries#

Image#

Feeling pixelated? PCR support images, too!

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^