Icons

An Icons react library

React-scripts

Lint Project using eslint

yarn run lint --fix

Create React Typescript Components from svg icons (using svgr library - https://react-svgr.com/)

yarn run generate

Create build folder using rollup.js (module bundler for JavaScript)

yarn run build

Folder Structure

• assets (all svg icons eg.exported from Figma)
• build (library folder with ready to publish files with esm format)
• src
  • icons (create dynamically using yarn run generate)
  • stories
    • {name}.stories.tsx (eg. Icons storybook having all icons)
  • index.tsx (export icons)
• .svgrcc.js (configuration file for svgr, there you can add multiple plugins eg. @svgr/babel-plugin-remove-jsx-attribute)
• rollup.config.js (configuration file for rollup using to build library)
• .eslintrc.js (configuration file for eslint)

Installation

yarn add @cambridgeassessment/ui-react-icons

Usage

import { OpenTranscript } from '@cambridgeassessment/ui-react-icons';

function App() {
	return (
		<>
			<OpenTranscript style={{ fontSize: '24px' ,color:'blue'}} />
		</>
	);
}

options (make icons accessible for screen reader)

<OpenTranscript
	style={{ fontSize: '32px',color:'red' }}
	title="my title"
	titleId="my-title-id"
/>

License

cambridgeassessment