Back to Polythene Icon main page

Icon component for React

• Options
• Usage - With SVG - With SVG source files - With image source files
• Appearance
  • Sizes
  • Styling
    • Themed component
    • CSS
    • Style
  • RTL (right-to-left) support
  • Dark or light tone

Options

Icon options

Usage

With SVG

import React from "react"
import { Icon } from "polythene-react"

const starsSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/></svg>

<Icon svg={{ content: starsSVG }} />

Instead of passing svg as option, the SVG component can be used as child:

import { Icon, SVG } from "polythene-react"

<Icon><SVG>{starsSVG}</SVG></Icon>

With SVG source files

<Icon svg={{ src: "app/assets/stars.svg" }} />

With image source files

<Icon src={"img/arrow.png" />

Appearance

Sizes

The size is set with option size (4 sizes). Use CSS for more finegrained control.

Styling

Below are examples how to change the icon appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { IconCSS } from "polythene-css"

IconCSS.addStyle(".themed-icon", {
  size_regular: 50,
  color_light:  "purple",
  color_dark:   "orange"
})

<Icon svg={{ content: starsSVG }} className="themed-icon" />

CSS

Change CSS using the Icon CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/icon"

Style

Some style attributes can be set using option style. For example:

<Icon svg={{ content: starsSVG }} style={{ color: "#EF6C00" }} />

RTL (right-to-left) support

The direction of the Icon is flipped when:

• it is contained within an element that either has attribute dir="rtl" or has className pe-rtl
• has className pe-rtl--flip

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set