Merge 8b14814 into 13c8e7a

boltdesignsystem · Jan 10, 2019 · 29e7ca7 · 29e7ca7
2 parents 13c8e7a + 8b14814
commit 29e7ca7
Show file tree

Hide file tree

Showing 121 changed files with 1,752 additions and 710 deletions.
diff --git a/docs-site/.incache b/docs-site/.incache
diff --git a/packages/components/bolt-icon/icon.schema.yml b/packages/components/bolt-icon/icon.schema.yml
@@ -1,4 +1,4 @@
-$schema: http://json-schema.org/draft-04/schema#
+$schema: 'http://json-schema.org/draft-04/schema#'
 title: Icon
 type: object
 required:
@@ -8,7 +8,6 @@ properties:
     type: string
     description: Icon name.
     enum:
-      #todo: dynamically generate or reference these
       - academy
       - add-open
       - add-solid
@@ -30,16 +29,16 @@ properties:
       - calendar
       - careers
       - case-management
+      - check
       - check-circle
       - check-solid
-      - check
       - chevron-down
       - chevron-left
       - chevron-right
       - chevron-up
+      - close
       - close-open
       - close-solid
-      - close
       - cloud
       - co-browse
       - communications
@@ -53,14 +52,14 @@ properties:
       - email
       - energy
       - entertainment
-      - exit-full screen
+      - exit-full-screen
       - external-link
-      - eye-off
       - eye
-      - facebook-solid
+      - eye-off
       - facebook
-      - field-service-gray
+      - facebook-solid
       - field-service
+      - field-service-gray
       - filter
       - financial
       - full-screen
@@ -79,14 +78,14 @@ properties:
       - knowledgebase
       - launchpad
       - life-sciences
-      - linkedin-solid
       - linkedin
+      - linkedin-solid
       - lock
       - manufacturing
-      - map-pin-solid
       - map-pin
-      - marketing-gray
+      - map-pin-solid
       - marketing
+      - marketing-gray
       - menu
       - minus-open
       - minus-solid
@@ -113,8 +112,8 @@ properties:
       - system-admin
       - training
       - transportation
-      - twitter-solid
       - twitter
+      - twitter-solid
       - unlock
       - upload
       - user

diff --git a/packages/components/bolt-icons/build-icons.js b/packages/components/bolt-icons/build-icons.js
@@ -5,6 +5,9 @@ const path = require('path');
 const cheerio = require('cheerio');
 const prettier = require('prettier');
 const SVGO = require('svgo');
+const yaml = require('js-yaml');
+const { getConfig } = require('@bolt/build-tools/utils/config-store');
+const { buildPrep } = require('@bolt/build-tools/tasks/task-collections');
 
 const svgo = new SVGO({
   plugins: [
@@ -224,10 +227,11 @@ async function transpileIcons(icons) {
         singleQuote: true,
         trailingComma: 'es5',
         bracketSpacing: true,
+        jsxBracketSameLine: true,
         parser: 'flow',
       });
 
-      await fs.outputFile(location, element, 'utf-8');
+      await fs.outputFile(location, component, 'utf-8');
       // Later when we call `const icons = await transpileIcons(iconPaths);` - `icons` will be an array of these objects:
       return {
         location,
@@ -260,6 +264,7 @@ async function build() {
       allExports.join('\n'),
       'utf-8',
     );
+    generateFile(icons);
     console.log(`Built ${iconPaths.length} icons.`);
   } catch (error) {
     console.error(error);
@@ -270,4 +275,38 @@ async function build() {
   }
 }
 
+async function generateFile(icons) {
+  try {
+    const config = await getConfig();
+    await buildPrep();
+    const names = icons.map(icon => icon.id);
+    const schema = yaml.safeLoad(
+      fs.readFileSync('../bolt-icon/icon.schema.yml', 'utf8'),
+    );
+    const dataDirectory = path.join(__dirname, '../../../', config.dataDir);
+    const boltIconDirectory = path.join(__dirname, '../bolt-icon');
+
+    schema.properties.name.enum = names;
+    await fs.mkdirp(path.join(dataDirectory));
+
+    // update bolt-icon schema with newest icons from svgs folder
+    await fs.writeFile(
+      path.join(boltIconDirectory, 'icon.schema.yml'),
+      yaml.safeDump(schema),
+    );
+    // generate `icons.bolt.json` file with newest icons array
+    await fs.writeFile(
+      path.join(dataDirectory, 'icons.bolt.json'),
+      JSON.stringify(names, null, 4),
+    );
+    console.log(`Icon Schema updated and Icons JSON generated.`);
+  } catch (error) {
+    console.error(error);
+    console.error(
+      'Error trying to generate Icon YAML document for "@bolt/components-icon".',
+    );
+    process.exitCode = 1;
+  }
+}
+
 build();
diff --git a/packages/components/bolt-icons/package.json b/packages/components/bolt-icons/package.json
@@ -23,6 +23,7 @@
     "cheerio": "^1.0.0-rc.2",
     "fs-extra": "^5.0.0",
     "globby": "^8.0.1",
+    "js-yaml": "^3.12.1",
     "nodemon": "^1.15.1",
     "prettier": "^1.7.4",
     "svgo": "^1.0.5",

diff --git a/packages/components/bolt-icons/src/icons/academy.js b/packages/components/bolt-icons/src/icons/academy.js
@@ -1,8 +1,13 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const Academy = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg data-name="Layer 1" {...otherProps} viewBox="0 0 28 32"><path fill={bgColor} fill-rule="evenodd" d="M14 32a.37.37 0 0 1-.3-.1C13.5 31.9 0 26.8 0 11.7V.9A.92.92 0 0 1 1 0h26a1 1 0 0 1 1 .9v10.8c0 15.1-13.5 20.2-13.7 20.2a.37.37 0 0 1-.3.1zM1.9 1.9v9.8C1.9 24.2 12 29.2 14 30c2-.9 12.1-5.7 12.1-18.3V1.9zm10.5 16.6a.91.91 0 0 1-.7-.3L8 14.5a.85.85 0 0 1 0-1.3 1 1 0 0 1 1.4 0l3 3 6.3-6.1a1 1 0 0 1 1.4 0 .85.85 0 0 1 0 1.3l-7 6.8a1.08 1.08 0 0 1-.7.3z"/></svg>
-      )
+export const Academy = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg data-name="Layer 1" {...otherProps} viewBox="0 0 28 32">
+      <path
+        fill={bgColor}
+        fill-rule="evenodd"
+        d="M14 32a.37.37 0 0 1-.3-.1C13.5 31.9 0 26.8 0 11.7V.9A.92.92 0 0 1 1 0h26a1 1 0 0 1 1 .9v10.8c0 15.1-13.5 20.2-13.7 20.2a.37.37 0 0 1-.3.1zM1.9 1.9v9.8C1.9 24.2 12 29.2 14 30c2-.9 12.1-5.7 12.1-18.3V1.9zm10.5 16.6a.91.91 0 0 1-.7-.3L8 14.5a.85.85 0 0 1 0-1.3 1 1 0 0 1 1.4 0l3 3 6.3-6.1a1 1 0 0 1 1.4 0 .85.85 0 0 1 0 1.3l-7 6.8a1.08 1.08 0 0 1-.7.3z"
+      />
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/add-open.js b/packages/components/bolt-icons/src/icons/add-open.js
@@ -1,8 +1,15 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AddOpen = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path /><g fill={bgColor}><path d="M12 21c-4.962 0-9-4.038-9-9s4.038-9 9-9 9 4.038 9 9-4.038 9-9 9m0-20C5.937 1 1 5.938 1 12s4.938 11 11 11 11-4.938 11-11S18.062 1 12 1"/><path d="M16 11h-3V8c0-.55-.45-1-1-1s-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1"/></g></g></svg>
-      )
+export const AddOpen = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 24 24">
+      <g fill="none" fill-rule="evenodd">
+        <path />
+        <g fill={bgColor}>
+          <path d="M12 21c-4.962 0-9-4.038-9-9s4.038-9 9-9 9 4.038 9 9-4.038 9-9 9m0-20C5.937 1 1 5.938 1 12s4.938 11 11 11 11-4.938 11-11S18.062 1 12 1" />
+          <path d="M16 11h-3V8c0-.55-.45-1-1-1s-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1" />
+        </g>
+      </g>
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/add-solid.js b/packages/components/bolt-icons/src/icons/add-solid.js
@@ -1,8 +1,22 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AddSolid = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path /><circle cx="11" cy="11" r="11" fill={bgColor} transform="translate(1 1)"/><path fill={fgColor} d="M16 11h-3V8c0-.55-.45-1-1-1s-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1"/></g></svg>
-      )
+export const AddSolid = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 24 24">
+      <g fill="none" fill-rule="evenodd">
+        <path />
+        <circle
+          cx="11"
+          cy="11"
+          r="11"
+          fill={bgColor}
+          transform="translate(1 1)"
+        />
+        <path
+          fill={fgColor}
+          d="M16 11h-3V8c0-.55-.45-1-1-1s-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1"
+        />
+      </g>
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/agile.js b/packages/components/bolt-icons/src/icons/agile.js
@@ -1,8 +1,14 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const Agile = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.97 31.7"><path fill={bgColor} fill-rule="evenodd" d="M31.9 25.6a1.1 1.1 0 0 1 0 .8c0 .1-.1.2-.2.3L27 31.4a.91.91 0 0 1-.7.3 1.08 1.08 0 0 1-.7-.3 1 1 0 0 1 0-1.4l.8-.8 2.3-2.2h-11a13.49 13.49 0 0 1-8.6-3.1l-1.2-1.2A13.45 13.45 0 0 1 5.1 8.6 13.68 13.68 0 0 1 14.4.4a12.42 12.42 0 0 1 3.3-.4 13.65 13.65 0 0 1 13.6 13.5 10.9 10.9 0 0 1-.3 2.6 11.64 11.64 0 0 1-1.3 3.7.22.22 0 0 1-.2.2L28 18.6a11.73 11.73 0 0 1 .5-1.1 13.32 13.32 0 0 0 .5-1.9 14.92 14.92 0 0 0 .2-2.1A11.52 11.52 0 0 0 7 9.2a12.17 12.17 0 0 0-.8 4.3 11.69 11.69 0 0 0 2.4 7.1c.3.4.6.7.9 1.1a11.51 11.51 0 0 0 8.1 3.4h10.9l-.3-.3-2-2-.7-.7a1 1 0 0 1 1.4-1.4l2.2 2.2 2.5 2.5.1.1c.1-.2.2-.1.2.1zm-24.5-.7a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z" data-name="path-1"/></svg>
-      )
+export const Agile = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.97 31.7">
+      <path
+        fill={bgColor}
+        fill-rule="evenodd"
+        d="M31.9 25.6a1.1 1.1 0 0 1 0 .8c0 .1-.1.2-.2.3L27 31.4a.91.91 0 0 1-.7.3 1.08 1.08 0 0 1-.7-.3 1 1 0 0 1 0-1.4l.8-.8 2.3-2.2h-11a13.49 13.49 0 0 1-8.6-3.1l-1.2-1.2A13.45 13.45 0 0 1 5.1 8.6 13.68 13.68 0 0 1 14.4.4a12.42 12.42 0 0 1 3.3-.4 13.65 13.65 0 0 1 13.6 13.5 10.9 10.9 0 0 1-.3 2.6 11.64 11.64 0 0 1-1.3 3.7.22.22 0 0 1-.2.2L28 18.6a11.73 11.73 0 0 1 .5-1.1 13.32 13.32 0 0 0 .5-1.9 14.92 14.92 0 0 0 .2-2.1A11.52 11.52 0 0 0 7 9.2a12.17 12.17 0 0 0-.8 4.3 11.69 11.69 0 0 0 2.4 7.1c.3.4.6.7.9 1.1a11.51 11.51 0 0 0 8.1 3.4h10.9l-.3-.3-2-2-.7-.7a1 1 0 0 1 1.4-1.4l2.2 2.2 2.5 2.5.1.1c.1-.2.2-.1.2.1zm-24.5-.7a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"
+        data-name="path-1"
+      />
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/app-development.js b/packages/components/bolt-icons/src/icons/app-development.js
@@ -1,8 +1,14 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AppDevelopment = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg data-name="Layer 1" {...otherProps} viewBox="0 0 30 30"><path fill={bgColor} fill-rule="evenodd" d="M28 8H2V3a.94.94 0 0 1 1-1h24a.94.94 0 0 1 1 1zm0 19a.94.94 0 0 1-1 1H3a.94.94 0 0 1-1-1V10h26zm1-27H1a.94.94 0 0 0-1 1v28a.94.94 0 0 0 1 1h28a.94.94 0 0 0 1-1V1a.94.94 0 0 0-1-1zM8 6h2V4H8zm4 0h2V4h-2zM4 6h2V4H4zm10 18h2v-4h4v-2h-4v-4h-2v4h-4v2h4z" data-name="Page-1"/></svg>
-      )
+export const AppDevelopment = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg data-name="Layer 1" {...otherProps} viewBox="0 0 30 30">
+      <path
+        fill={bgColor}
+        fill-rule="evenodd"
+        d="M28 8H2V3a.94.94 0 0 1 1-1h24a.94.94 0 0 1 1 1zm0 19a.94.94 0 0 1-1 1H3a.94.94 0 0 1-1-1V10h26zm1-27H1a.94.94 0 0 0-1 1v28a.94.94 0 0 0 1 1h28a.94.94 0 0 0 1-1V1a.94.94 0 0 0-1-1zM8 6h2V4H8zm4 0h2V4h-2zM4 6h2V4H4zm10 18h2v-4h4v-2h-4v-4h-2v4h-4v2h4z"
+        data-name="Page-1"
+      />
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/app-exchange.js b/packages/components/bolt-icons/src/icons/app-exchange.js
@@ -1,8 +1,14 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AppExchange = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.8 32"><path fill={bgColor} fill-rule="evenodd" d="M14.9 2.6v9.9a1 1 0 0 0 2 0V2.6l11.7 5.8-12.7 6.4L3.2 8.5zm2 13.9L29.8 10v11.8L20 17a1 1 0 1 0-.9 1.7l9.5 4.7-11.7 6zm-3.5.8a.88.88 0 0 0-1.3-.4L2 21.9V10.1l12.9 6.4v12.8L3.2 23.5l9.8-4.9a.88.88 0 0 0 .4-1.3zm18.4-8.8a.37.37 0 0 0-.1-.3v-.1a.22.22 0 0 0-.2-.2v-.1c-.1-.1-.2-.1-.2-.2L16.3.1c-.1-.1-.2-.1-.4-.1s-.3 0-.4.1L.5 7.6a.22.22 0 0 0-.2.2v.1c-.1 0-.2 0-.2.1v.1c0 .1-.1.2-.1.3V24c0 .1.1.1.1.2v.1c.1.1.1.1.2.1l14.9 7.5a2.25 2.25 0 0 0 .7.1c.2 0 .3 0 .4-.1l14.9-7.5c.1 0 .1-.1.2-.1v-.1a.35.35 0 0 0 .1-.2V8.5z" data-name="path-1"/></svg>
-      )
+export const AppExchange = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.8 32">
+      <path
+        fill={bgColor}
+        fill-rule="evenodd"
+        d="M14.9 2.6v9.9a1 1 0 0 0 2 0V2.6l11.7 5.8-12.7 6.4L3.2 8.5zm2 13.9L29.8 10v11.8L20 17a1 1 0 1 0-.9 1.7l9.5 4.7-11.7 6zm-3.5.8a.88.88 0 0 0-1.3-.4L2 21.9V10.1l12.9 6.4v12.8L3.2 23.5l9.8-4.9a.88.88 0 0 0 .4-1.3zm18.4-8.8a.37.37 0 0 0-.1-.3v-.1a.22.22 0 0 0-.2-.2v-.1c-.1-.1-.2-.1-.2-.2L16.3.1c-.1-.1-.2-.1-.4-.1s-.3 0-.4.1L.5 7.6a.22.22 0 0 0-.2.2v.1c-.1 0-.2 0-.2.1v.1c0 .1-.1.2-.1.3V24c0 .1.1.1.1.2v.1c.1.1.1.1.2.1l14.9 7.5a2.25 2.25 0 0 0 .7.1c.2 0 .3 0 .4-.1l14.9-7.5c.1 0 .1-.1.2-.1v-.1a.35.35 0 0 0 .1-.2V8.5z"
+        data-name="path-1"
+      />
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/arrow-left.js b/packages/components/bolt-icons/src/icons/arrow-left.js
@@ -1,8 +1,13 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const ArrowLeft = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 18 14"><path fill={bgColor} fill-rule="nonzero" d="M.083 7.378a1.181 1.181 0 0 1-.069-.318v-.105a.951.951 0 0 1 .069-.33c.044-.112.1-.193.162-.274.03-.036.043-.049.055-.06l6-6a1.005 1.005 0 0 1 1.413 0 1.004 1.004 0 0 1 0 1.412L3.419 5.997H17c.55 0 1 .45 1 1s-.45 1-1 1H3.413l4.294 4.294a1.005 1.005 0 0 1 0 1.413.999.999 0 0 1-1.412 0L.301 7.71C.282 7.685.27 7.666.257 7.654a1.128 1.128 0 0 1-.174-.276z"/></svg>
-      )
+export const ArrowLeft = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 18 14">
+      <path
+        fill={bgColor}
+        fill-rule="nonzero"
+        d="M.083 7.378a1.181 1.181 0 0 1-.069-.318v-.105a.951.951 0 0 1 .069-.33c.044-.112.1-.193.162-.274.03-.036.043-.049.055-.06l6-6a1.005 1.005 0 0 1 1.413 0 1.004 1.004 0 0 1 0 1.412L3.419 5.997H17c.55 0 1 .45 1 1s-.45 1-1 1H3.413l4.294 4.294a1.005 1.005 0 0 1 0 1.413.999.999 0 0 1-1.412 0L.301 7.71C.282 7.685.27 7.666.257 7.654a1.128 1.128 0 0 1-.174-.276z"
+      />
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/asset-data.js b/packages/components/bolt-icons/src/icons/asset-data.js
@@ -1,8 +1,11 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AssetData = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 24 24"><g fill={bgColor} fill-rule="evenodd"><path d="M11 20h2V4h-2v16zm2-18h-2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM19 20h2V9h-2v11zm2-13h-2c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM3 20h2v-6H3v6zm2-8H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2z"/></g></svg>
-      )
+export const AssetData = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 24 24">
+      <g fill={bgColor} fill-rule="evenodd">
+        <path d="M11 20h2V4h-2v16zm2-18h-2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM19 20h2V9h-2v11zm2-13h-2c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM3 20h2v-6H3v6zm2-8H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2z" />
+      </g>
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/asset-infographic.js b/packages/components/bolt-icons/src/icons/asset-infographic.js
@@ -1,8 +1,12 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AssetInfographic = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 24 24"><g fill={bgColor} fill-rule="evenodd"><path d="M8.5 8c.275 0 .5.225.5.5s-.225.5-.5.5a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5m0 3a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/><path d="M19 20H7.412L16 11.413l4 4v3.588c0 .55-.45 1-1 1V20zM4 5c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v7.587l-3.294-3.294a1.005 1.005 0 0 0-1.413 0L4.649 19.937a1 1 0 0 1-.65-.938v-14L4 5zm18 10V5c0-1.656-1.344-3-3-3H5C3.344 2 2 3.344 2 5v14a3.002 3.002 0 0 0 2.988 3H19c1.656 0 3-1.344 3-3v-4z"/></g></svg>
-      )
+export const AssetInfographic = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 24 24">
+      <g fill={bgColor} fill-rule="evenodd">
+        <path d="M8.5 8c.275 0 .5.225.5.5s-.225.5-.5.5a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5m0 3a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
+        <path d="M19 20H7.412L16 11.413l4 4v3.588c0 .55-.45 1-1 1V20zM4 5c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v7.587l-3.294-3.294a1.005 1.005 0 0 0-1.413 0L4.649 19.937a1 1 0 0 1-.65-.938v-14L4 5zm18 10V5c0-1.656-1.344-3-3-3H5C3.344 2 2 3.344 2 5v14a3.002 3.002 0 0 0 2.988 3H19c1.656 0 3-1.344 3-3v-4z" />
+      </g>
+    </svg>
+  );
 };
diff --git a/packages/components/bolt-icons/src/icons/asset-interactive.js b/packages/components/bolt-icons/src/icons/asset-interactive.js
@@ -1,8 +1,20 @@
+import { h } from '@bolt/core/renderers';
 
-  import { h } from '@bolt/core/renderers';
-
-  export const AssetInteractive = ({ bgColor, fgColor, size, ...otherProps }) => {
-      return (
-        <svg {...otherProps} viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill={bgColor} d="M5.428 5.54a.74.74 0 0 0-.737-.738H1.737a.74.74 0 0 0 0 1.48h2.954c.406 0 .737-.331.737-.741"/><path fill={bgColor} d="M22.14 5.477c0-.01-.006-.015-.006-.024a.726.726 0 0 0-.183-.441c-.01-.013-.004-.032-.017-.043-.01-.013-.031-.007-.042-.018-.028-.024-.061-.04-.092-.061l-2.873-2.878a.709.709 0 1 0-1.002 1.002l1.74 1.745h-7.057a3.031 3.031 0 0 0-3.02-2.913 3.038 3.038 0 0 0-3.034 3.033v7.33l-.244-.243c-.984-.99-2.723-.987-3.707-.002a2.598 2.598 0 0 0-.766 1.854c0 .701.271 1.36.689 1.767l4.803 6.21a.92.92 0 0 0 1.295.166.923.923 0 0 0 .166-1.294l-4.882-6.3a.768.768 0 0 1-.225-.55c0-.206.08-.402.225-.546a.797.797 0 0 1 1.097 0l1.819 1.819a.916.916 0 0 0 1.006.2.92.92 0 0 0 .57-.852v-9.56a1.19 1.19 0 0 1 1.187-1.186c.656 0 1.187.533 1.187 1.187v6.059c0 .399.253.751.632.877l4.13 1.377a3.32 3.32 0 0 1 2.272 3.153v4.885a.922.922 0 1 0 1.846 0v-4.885c0-2.228-1.42-4.2-3.535-4.905l-3.499-1.167V6.238h7.045l-1.74 1.744a.709.709 0 1 0 1.002 1.003L21.8 6.107c.031-.02.064-.037.09-.061.013-.011.031-.008.044-.019.013-.01.008-.031.017-.044a.737.737 0 0 0 .183-.438c0-.009.005-.016.003-.027.002-.008.006-.013.006-.02 0-.008-.004-.015-.004-.021" mask="url(#mask-2)" transform="translate(1 .044)"/></g></svg>
-      )
+export const AssetInteractive = ({ bgColor, fgColor, size, ...otherProps }) => {
+  return (
+    <svg {...otherProps} viewBox="0 0 24 24">
+      <g fill="none" fill-rule="evenodd">
+        <path
+          fill={bgColor}
+          d="M5.428 5.54a.74.74 0 0 0-.737-.738H1.737a.74.74 0 0 0 0 1.48h2.954c.406 0 .737-.331.737-.741"
+        />
+        <path
+          fill={bgColor}
+          d="M22.14 5.477c0-.01-.006-.015-.006-.024a.726.726 0 0 0-.183-.441c-.01-.013-.004-.032-.017-.043-.01-.013-.031-.007-.042-.018-.028-.024-.061-.04-.092-.061l-2.873-2.878a.709.709 0 1 0-1.002 1.002l1.74 1.745h-7.057a3.031 3.031 0 0 0-3.02-2.913 3.038 3.038 0 0 0-3.034 3.033v7.33l-.244-.243c-.984-.99-2.723-.987-3.707-.002a2.598 2.598 0 0 0-.766 1.854c0 .701.271 1.36.689 1.767l4.803 6.21a.92.92 0 0 0 1.295.166.923.923 0 0 0 .166-1.294l-4.882-6.3a.768.768 0 0 1-.225-.55c0-.206.08-.402.225-.546a.797.797 0 0 1 1.097 0l1.819 1.819a.916.916 0 0 0 1.006.2.92.92 0 0 0 .57-.852v-9.56a1.19 1.19 0 0 1 1.187-1.186c.656 0 1.187.533 1.187 1.187v6.059c0 .399.253.751.632.877l4.13 1.377a3.32 3.32 0 0 1 2.272 3.153v4.885a.922.922 0 1 0 1.846 0v-4.885c0-2.228-1.42-4.2-3.535-4.905l-3.499-1.167V6.238h7.045l-1.74 1.744a.709.709 0 1 0 1.002 1.003L21.8 6.107c.031-.02.064-.037.09-.061.013-.011.031-.008.044-.019.013-.01.008-.031.017-.044a.737.737 0 0 0 .183-.438c0-.009.005-.016.003-.027.002-.008.006-.013.006-.02 0-.008-.004-.015-.004-.021"
+          mask="url(#mask-2)"
+          transform="translate(1 .044)"
+        />
+      </g>
+    </svg>
+  );
 };