svg.md

Back to Polythene SVG main page

SVG component for React

• Options
• Usage
  • With source files
  • Usage with Icon
• Appearance
  • Styling
    • Themed component
    • CSS
    • Style option
  • Dark or light tone

Options

SVG options

Usage

import React from "react"
import { SVG } 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>

<SVG>{starsSVG}</SVG>

// or:

<SVG content={starsSVG} />

Note that JSX needs SVG attributes to be camelCased; see React: All Supported SVG Attributes.

With source files

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

Usage with Icon

SVG options can be passed to Icon:

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 }} />

Appearance

Styling

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

You can find more information about theming in Theming.

Themed component

import { SVGCSS } from "polythene-css"

SVGCSS.addStyle(".themed-svg", {
  color_light: "#0d47a1",
  color_dark: "orange"
})

<SVG className="themed-svg">{starsSVG}</SVG>

CSS

Change CSS using the SVG CSS classes.

Class names can be imported with:

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

Style option

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

<SVG style={{ color: "#ef6c00" }}>{starsSVG}</SVG>

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