React-pangolicons NPM

React-Pangolicons

Pangolicons, but for React! 🎉

🚀 Getting started

Install the package via npm:

npm install react-pangolicons

You can then import the Icons you want to use into your component.

import React from 'react';

// Import the icon you need

import { Pangolin } from 'react-pangolicons';

// In case the Iconname conflicts with one of your own Components,
// you can change the name on Import

import { Pangolin as PangolinIcon } from 'react-pangolicons';

export default () => {
	return (
		<div>
			...
			<Pangolin />
			<PangolinIcon />
		</div>
	);
};

All icons are converted to PascalCase to work with React out of the box.

`Attributes`

The component can receive a number of props to configure the icon.

Property	Type	Description
size	String?	The size of the Icon.
className	String?	A custom class name to append to the icon classes.
strokeWidth	String?	The stroke-width property of the svg
color	String?	The color of the stroke
linejoin	String?	The linejoin of the stroke
linecap	String?	The linecap of the stroke

import React from 'react';
import { Pangolin } from 'react-pangolicons';

export default () => {
	return <Pangolin size={24} strokeWidth={1.5} />;
};

You could also use the spread operator to pass the props.

import React from 'react';
import { Pangolin } from 'react-pangolicons';

export default () => {
	const attributes = {
		size: 24,
		strokeWidth: 1.5,
		color: 'currentColor',
	};

	return <Pangolin {...attributes} />;
};