Isopacks

Isopacks are add-on modules for Isoflow that contain icons and other assets. You can easily build your own from scratch or create and load your own.

Cloud & Network Isopacks

These are available as a separately maintained project on Github (opens in a new tab). Below is a sample of icons available in the Isoflow Isopack:

In addition, Isopacks for AWS, Azure, GCP, and Kubernetes are included. You can choose which Isopacks to import into your app and which to leave out.

Loading Isopacks into Isoflow

1. Install the npm package:

npm i @isoflow/isopacks

2. Import your selected Isopacks:

import Isoflow from 'isoflow';
import { flattenCollections } from 'isoflow/dist/utils';
import isoflowIsopack from '@isoflow/isopacks/dist/isoflow';
import awsIsopack from '@isoflow/isopacks/dist/aws';
import gcpIsopack from '@isoflow/isopacks/dist/gcp';
import azureIsopack from '@isoflow/isopacks/dist/azure';
import kubernetesIsopack from '@isoflow/isopacks/dist/kubernetes';
 
const icons = flattenCollections([
  isoflowIsopack,
  awsIsopack,
  azureIsopack,
  gcpIsopack,
  kubernetesIsopack
]);
 
const App = () => {
  return (
    <Isoflow initialData={{
      title: 'Example scene',
      icons,
      colors: [],
      items: [],
      views: []
    }} />
  );
}
 
export default App;

Usage without Isoflow

Isopacks can also be used without Isoflow or React (for example, you can simply drag and drop the images into slides or documents, or import into your vanilla Javascript / Typescript project). See the Isopacks Github project (opens in a new tab) for more information.

Self-hosting vs importing icons

While you can import the icon images directly into your JS or TS application, it is recommended that you host the icon images yourself so that they can be lazy-loaded (referencing them via URL from a service like S3 or a CDN).