Illustrations

Installation#

yarn add @exponentialeducation/illustrations

Quick start#

import { BlendedIcon } from "@exponentialeducation/illustrations"

const SinglePage = () => {
  return (
    <div>
      <BlendedIcon className="w-24 h-24 text-primary-300 fill-light" />
    </div>
  );
};

Categories#

Illustrations come in two different categories; General ones as Generic and Learning paths, those last ones are also divided by learning path.

Generic#

Learning Paths#

Web development#

Digital Product#

Data & AI#

Customization#

Illustrations can be customized since they have a main color associated with each one. This color can be changed according to a given color palette or cobranding.

import { BlendedIcon } from "@exponentialeducation/illustrations"

const SinglePage = () => {
  return (
    <div>
      <BlendedIcon
        className="text-success-300 fill-light dark:fill-dark"
      />

      <BlendedIcon
        className="text-info-300 fill-light dark:fill-dark"
      />

      <BlendedIcon
        className="text-warning-300 fill-light dark:fill-dark"
      />

      <BlendedIcon
        className="text-error-300 fill-light dark:fill-dark"
      />
    </div>
  );
};