@ultraviolet/illustrations NPM

Ultraviolet Illustrations

Ultraviolet Illustrations is a set of illustrations.

Get Started

$ pnpm add @ultraviolet/illustrations

Usage

Assets

import { instanceOriginal } from '@ultraviolet/illustrations/products/instance'

const App = () => <img src={instanceOriginal} alt="illustration instance" />

Components

import { DynamicIllustration } from '@ultraviolet/illustrations'

const App = () => <DynamicIllustration name="success">

Making changes

The entire process of adding, deleting or editing an asset is automated. The imports and exports are handled automatically by @utils/illustrations/uploadIllustrations.js.

When a file from the package is edited in a pull request, the aforementioned script runs and updates every index.ts to ensure the imports and exports match the names of the folders and files located in assets/. It is only possible edit (add, delete or replace some assets) the assets to the assets/ folder. Any changes made directly to one of the index.ts file will be overriden by an automatic commit.

Adding an asset

Simply add the assets you want to include in the package to the correct folder in assets/ and create a pull request. Once the pull request is approved and the branch is merged, the illustrations will be added to an S3 bucket and exported in the package automatically.

Deleting an asset

It is possible to delete an asset. To do so, simply delete its folder. However, the asset will still be present in the S3 bucket and can be used by directly importing the link from the S3 bucket.

Editing an asset

If an asset is renamed, the old version will remain on the bucket but will not be exported in ultraviolet. Make sure to correctly rename the assets' name as well as their directory.
If an asset is modified, without changing its name, it will replace the old version on the bucket, which will not be available anymore.