@equinor/engineering-symbols

Preview 🧸

Engineering symbols

Engineering symbols (dev)

Example 🪴

import { Icon } from '@equinor/engineering-symbols';

export const Page = (): ReactElement => {
	return (
		<>
			<Icon appearance="main" name="arrow-right" height={50} width={50} />
		</>
	);
};

Props 📦

Required props are marked with *.

| Name | Type | Default | Description | | ------------ | ---------------- | ------- | ------------------------------------------ | | appearance | IconAppearance | main | Provides icon styling | | rotate | number | 0 | Renders a icon with pre-declaration rotate | | height | number | 70 | Renders a icon with pre-declaration height | | width | number | 70 | Renders a icon with pre-declaration width | | name* | IconName | | Provides icon illustration |

Svg convertor 🪚

SVG-convertor allow to unify every .svg files to one standard .tsx. For conversation svg used svgr library.

Current settings for converting:

• Remove title
• Remove empty attributes
• Remove description
• Merge paths
• Convert shape to path
• Remove stroke form elements
• Implementation ID names for existing elements with ID -> ${svgName}_${originalID}
• Minify svg

Folders structure:

• Svg's files (output): src/svg
• .tsx's files (output): src/components/icon/icons

Run svgs:

$ npm run build:svgs

Run svgr:

$ npm run svgr

Dependabot 🩺

DON'T UPDATT MAJOR VERSION:

• @storybook/preset-create-react-app
• react-scripts

PR's & releases version 🦆

Consistent title names help maintainers organise their projects better 📚

Prefixes:

• patch: patch,fixes,fix,chore,Bump
• minor: feat
• major: major

Example: chore: Update README.md | fix: Colors for head

For development at the library 🥷

Install Node.js

Install the latest [LTS] (https://nodejs.org) version of Node.js, and at the same time make sure you are on version 6 of the npm-CLI.

$ node -v && npm -v
v16.14.0
8.31.0

Install Npm

$ npm install --global npm

Install project dependencies

$ npm i

Local development

$ npm run storybook
$ npm run dev # Runs up a local dev version of Storybook - Both good tools to use to quickly see changes along the way.

Code quality

The project is set up with TypeScript, Eslint, Prettier, and the following is run when validating each pull request:

$ npm run checkcode

Testing

We will write unit tests on critical functionality.

$ npm run test

Construction

$ npm run build:storybook # Builds Storybook for static files, and deploys for Vercel for pull requests and merging for main
$ npm run build:lib # Packs the library (not Storybook) - This step is run before `npm publish` is run