React: create single TSX component with free icons from twitter bootstrap

In case you want a react component with an SVG icon, you can use this approach I’m currently using

1. find icon in https://icons.getbootstrap.com/

2. create a component (React 17 / Typescript)

import * as React from "react";

export function MoveIcon(props: React.SVGProps<SVGSVGElement>) {
    props = {width: 16, height: 16, fill: 'currentColor', ...props};
    return <svg xmlns="http://www.w3.org/2000/svg"
                viewBox={`0 0 ${props.width} ${props.height}`}
                {...props}
    >
        <title>{props["aria-labelledby"]}</title>
        <path ... />
    </svg>
}

3. inside the <path> element, paste the <path code found in step 1. Replace attributes with the corresponding react element camelCase name, e.g. fillRule instead of fill-rule

4. import and use

import {MoveIcon} from "../svg/MoveIcon";

export default function MyComponent() {
   return <>
     <MoveIcon/>
   </>;
}

Thanks for reading !

What to do next:
- Clap if useful
- Buy me a coffee
- Follow me for more
- Read my other articles
- Keep in touch on LinkedIn