feat(Icons): add strokeWidth prop to Icons

packages/gamut-icons/icon-template.js

@@ -12,6 +12,7 @@ function iconTemplate(api, opts, { jsx }) {
       title,
       titleId,
       size = 16,
+      strokeWidth = 1.5,
       height = size,
       width = size,
       ...props

packages/gamut-icons/mask-plugin.js

@@ -80,7 +80,6 @@ const plugin = (api) => {
         types.jsxElement(ogOpen, ogClose, [newChildren, newerChildren])
       );
 
-      // path.node.children.unshift(titleNode);
       path.skip();
     },
   };

packages/gamut-icons/stroke-width-plugin.js

@@ -0,0 +1,22 @@
+const plugin = (api) => {
+  const { types } = api;
+
+  const visitor = {
+    JSXAttribute(path) {
+      if (path.get('name').isJSXIdentifier({ name: 'strokeWidth' })) {
+        const inherit = types.stringLiteral('inherit');
+        path.get('value').replaceWith(inherit);
+      }
+    },
+  };
+
+  return {
+    visitor: {
+      Program(path) {
+        path.traverse(visitor);
+      },
+    },
+  };
+};
+
+module.exports = plugin;

packages/gamut-icons/svgr.config.js

@@ -1,5 +1,6 @@
 const emotionPlugin = require('./emotion-plugin');
 const maskPlugin = require('./mask-plugin');
+const strokeWidthPlugin = require('./stroke-width-plugin');
 const template = require('./icon-template');
 const indexTemplate = require('./index-template');
 
@@ -14,6 +15,7 @@ module.exports = {
     'pointer-events': 'none',
     width: '{width}',
     height: '{height}',
+    strokeWidth: '{strokeWidth}',
   },
   prettierConfig: {
     parser: 'typescript',
@@ -26,7 +28,7 @@ module.exports = {
   },
   jsx: {
     babelConfig: {
-      plugins: [maskPlugin, emotionPlugin],
+      plugins: [maskPlugin, emotionPlugin, strokeWidthPlugin],
     },
   },
   indexTemplate,

packages/gamut-illustrations/src/NewIllo.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { IllustrationProps } from './types';
+
+export const NewIllo: React.FC<IllustrationProps> = () => (
+  <svg
+    height="140"
+    viewBox="0 0 140 140"
+    width="140"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask height="140" id="mask0_1884_2441" width="140">
+      <path
+        d="M18 4.1441C19.565 3.89258 21.1469 3.76086 22.732 3.7501C22.8682 3.748 22.9997 3.79975 23.098 3.8941C23.1457 3.94035 23.1837 3.99566 23.2098 4.05679C23.2359 4.11792 23.2496 4.18363 23.25 4.2501V20.0181C23.2487 20.1503 23.1956 20.2767 23.1021 20.3702C23.0086 20.4637 22.8822 20.5168 22.75 20.5181C14.457 20.6211 12 23.2501 12 23.2501V6.4821C12 6.4821 9.545 3.8561 1.268 3.7501C1.1311 3.74747 0.998759 3.79926 0.9 3.8941C0.852636 3.94052 0.814982 3.9959 0.78923 4.05702C0.763478 4.11814 0.750142 4.18377 0.75 4.2501V20.0181C0.751303 20.1503 0.804399 20.2767 0.897887 20.3702C0.991374 20.4637 1.1178 20.5168 1.25 20.5181C9.543 20.6211 12 23.2501 12 23.2501"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 22.757C12.158 21.4609 12.732 20.2511 13.636 19.309C14.7992 18.0542 16.3246 17.1933 18 16.846V1.24298C17.9985 1.16256 17.9768 1.08381 17.937 1.01393C17.8971 0.944048 17.8404 0.885273 17.772 0.84298C17.6992 0.797222 17.6174 0.767648 17.5322 0.756261C17.4469 0.744874 17.3603 0.75194 17.278 0.77698C15.8748 1.18018 14.613 1.96909 13.636 3.05398C12.7324 3.99555 12.1584 5.20464 12 6.49998"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </mask>
+    <g mask="url(#mask0_1884_2441)">
+      <rect fill="#10162F" height="140" width="140" />
+    </g>
+  </svg>
+);

packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx

@@ -30,6 +30,8 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas sourceState="shown" of={RegularIconStories.TestStory} />
+
 ## General infomation
 
 For regular icons, we use a subset of [Streamline's "Ultimate Regular" icons](https://www.streamlinehq.com/icons/streamline-regular).

packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx

@@ -1,4 +1,9 @@
-import { AlertIcon } from '@codecademy/gamut-icons';
+import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';
+import {
+  AlertIcon,
+  BookFlipPageIcon,
+  BookFlippyPageIcon,
+} from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof AlertIcon> = {
@@ -9,6 +14,44 @@
 export default meta;
 type Story = StoryObj<typeof AlertIcon>;
 
+export const TestStory: Story = {
+  render: () => (
+    <>
+      <FlexBox flexDirection="column">
+        <Text as="code" width="100%">
+          different stroke-widths
+        </Text>
+        <GridBox gridTemplateColumns="1fr 1fr 1fr" gridTemplateRows="1fr 1fr">
+          <FlexBox flexDirection="column">
+            <Text>1.5</Text>
+            <BookFlipPageIcon size={100} />
+          </FlexBox>
+          <FlexBox flexDirection="column">
+            <Text>1.5px</Text>
+            <BookFlipPageIcon size={100} strokeWidth="1.5px" />
+          </FlexBox>
+          <FlexBox flexDirection="column">
+            <Text>.8</Text>
+            <BookFlipPageIcon size={100} strokeWidth={0.8} />
+          </FlexBox>
+        </GridBox>
+      </FlexBox>
+      <FlexBox flexDirection="column">
+        <Text as="code" width="100%">
+          vector-effect="non-scaling-stroke"
+        </Text>
+        <GridBox gap={4}>
+          <BookFlippyPageIcon size={20} />
+          <BookFlippyPageIcon size={40} />
+          <BookFlippyPageIcon size={60} />
+          <BookFlippyPageIcon size={300} />
+          <BookFlippyPageIcon size={400} />
+          <BookFlippyPageIcon size={500} />
+        </GridBox>
+      </FlexBox>
+    </>
+  ),
+};
 export const Default: Story = {
   args: {
     size: 40,