Skip to content

SVG guide

Jump to bottom
Kurtis Law edited this page Dec 8, 2022 · 1 revision

This is an editted version of the period purse's SVG wiki insert

We are using the react-native-svg-transformer package to handle SVG files.

Importing the SVG file

  1. Place the SVG inside the assets folder.
  2. Import it by import <ASSET_NAME> from '<PATH>'.
  3. Call <ASSET_NAME> in where you would've used it.

Changing colors of the SVG file

Inside the .SVG file's , you need to make sure either fill=currentColor or stroke=currentColor. This allows you to change the svg's color in JS. See example below.

NOTE that if you do this, you must have a fill property for your corresponding React Component, or else fill defaults to none and the svg won't show up.

See this for further explanation.

Usage Example

Assume the .svg file below is saved as "logo.svg"

  <svg fill="black"> </svg>

Import your .svg file inside a React component:

import Logo from "./logo.svg";

You can then use your image as a component:

<Logo fill={"#ff0000"} />

and the fill property in the svg file is functionally replaced by #ff0000 when rendered. You can also set other properties like width, height, etc. You can also style it, as normal.

Clone this wiki locally