Add new globe-with-lock icon

src/components/icons/GlobeAltLock.tsx

@@ -0,0 +1,34 @@
+// This file was auto-generated using scripts/generate-icons.js
+import type { JSX } from 'preact';
+
+export type GlobeAltLockIconProps = JSX.SVGAttributes<SVGSVGElement>;
+
+/**
+ * Icon generated from globe-alt-lock.svg
+ */
+export default function GlobeAltLockIcon(props: GlobeAltLockIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="17"
+      fill="none"
+      viewBox="0 0 16 17"
+      data-component="GlobeAltLockIcon"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M15.368 10.634c-.07-1.663-.816-2.364-2.496-2.364-1.726 0-2.5.774-2.5 2.5v.312c0 .172.14.312.313.312h.625c.172 0 .312-.14.312-.312v-.312l.003-.11c.057-.985.248-1.14 1.247-1.14 1.035 0 1.25.214 1.25 1.25v.312c0 .172.14.312.312.312h.625c.172 0 .312-.14.312-.312v-.312zm.624 1.937a.625.625 0 0 0-.62-.552h-5l-.072.004a.625.625 0 0 0-.552.621v3.75l.004.072c.036.31.3.552.62.552h5l.072-.004c.31-.036.552-.3.552-.62v-3.75z"
+        clip-rule="evenodd"
+      />
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M8.34 17.01a7.998 7.998 0 1 1 7.58-9.103 3 3 0 0 0-.166-.168c-.807-.763-1.87-.968-2.882-.968-1.053 0-2.148.232-2.957 1.041-.81.81-1.042 1.905-1.042 2.958v.368a2 2 0 0 0-.308.389 21 21 0 0 0-1.426.008c.093.811.231 1.545.406 2.159.094.327.195.608.297.835l.078.16.078.138c.053-.105.198.61.25.476v1.133l.01.16.004.043q.023.192.077.372m-5.431-4.813.17-.058.248-.075c.514-.146 1.126-.27 1.807-.361l.053.452.055.381c.114.752.27 1.436.467 2.03a6.02 6.02 0 0 1-2.8-2.369m-.765-4.492.002-.011c.782.284 1.762.504 2.86.645L5 8.717v.606l.007.38c-1.099.14-2.079.36-2.86.645a6 6 0 0 1-.003-2.643m6.59.806.258-.01.006.519-.006.519a26 26 0 0 0-1.988.001 24 24 0 0 1-.006-.52l.006-.518a26 26 0 0 0 1.73.009m-.737-5.3-.077.14c-.13.25-.258.587-.375.995a14 14 0 0 0-.407 2.158q.424.018.86.018t.86-.016a13.7 13.7 0 0 0-.407-2.16 6 6 0 0 0-.297-.835l-.078-.16zm-2.334.282.045-.02c-.229.694-.402 1.51-.52 2.412l-.055.453c-.877-.118-1.641-.288-2.225-.494a6.02 6.02 0 0 1 2.755-2.351m4.624-.02.051.158c.17.549.307 1.168.412 1.843l.059.411.053.453c.877-.118 1.642-.288 2.226-.493a6.02 6.02 0 0 0-2.536-2.254z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

src/components/icons/Lock.tsx

@@ -10,16 +10,18 @@ export default function LockIcon(props: LockIconProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="16"
-      viewBox="0 0 48 56"
+      width="18"
+      height="18"
+      viewBox="0 0 8 12"
       data-component="LockIcon"
       {...props}
     >
-      <g fill="currentColor" fill-rule="evenodd">
-        <path d="M0 24h48v32H0z" />
-        <path d="M24 0S8 0 8 16v16h8V16c0-8 8-8 8-8s8 0 8 8v16h8V16C40 0 24 0 24 0" />
-      </g>
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M6.997 3.587C6.91 1.592 6.017.75 4 .75c-2.071 0-3 .929-3 3v.375c0 .207.168.375.375.375h.75a.375.375 0 0 0 .375-.375V3.75l.004-.132C2.572 2.437 2.802 2.25 4 2.25c1.243 0 1.5.257 1.5 1.5v.375c0 .207.168.375.375.375h.75A.375.375 0 0 0 7 4.125V3.75zm.748 2.326A.75.75 0 0 0 7 5.25H1l-.087.005A.75.75 0 0 0 .25 6v4.5l.005.088A.75.75 0 0 0 1 11.25h6l.087-.005a.75.75 0 0 0 .663-.745V6z"
+        clip-rule="evenodd"
+      />
     </svg>
   );
 }

src/components/icons/LockAlt.tsx

@@ -5,6 +5,7 @@ export type LockAltIconProps = JSX.SVGAttributes<SVGSVGElement>;
 
 /**
  * Icon generated from lock-alt.svg
+ * @deprecated
  */
 export default function LockAltIcon(props: LockAltIconProps) {
   return (

src/components/icons/LockAltFilled.tsx

@@ -5,6 +5,7 @@ export type LockAltFilledIconProps = JSX.SVGAttributes<SVGSVGElement>;
 
 /**
  * Icon generated from lock-alt-filled.svg
+ * @deprecated
  */
 export default function LockAltFilledIcon(props: LockAltFilledIconProps) {
   return (

src/components/icons/index.ts

@@ -57,6 +57,7 @@ export { default as FolderOpenIcon } from './FolderOpen';
 export { default as FolderOpenFilledIcon } from './FolderOpenFilled';
 export { default as GlobeIcon } from './Globe';
 export { default as GlobeAltIcon } from './GlobeAlt';
+export { default as GlobeAltLockIcon } from './GlobeAltLock';
 export { default as GoogleDriveIcon } from './GoogleDrive';
 export { default as GroupsIcon } from './Groups';
 export { default as GroupsFilledIcon } from './GroupsFilled';

src/pattern-library/components/patterns/data/IconsPage.tsx

@@ -1,7 +1,11 @@
+import classnames from 'classnames';
+
 import { Link } from '../../../../';
 import * as Icons from '../../../../components/icons';
 import Library from '../../Library';
 
+const deprecatedIcons = [Icons.LockAltIcon, Icons.LockAltFilledIcon];
+
 export default function IconsPage() {
   return (
     <Library.Page
@@ -26,12 +30,17 @@ export default function IconsPage() {
         </Library.Pattern>
 
         <Library.Pattern title="Icon components">
+          <Library.Callout>Deprecated icons are greyed-out.</Library.Callout>
           <div className="my-4 grid grid-cols-4 gap-6">
             {(Object.keys(Icons) as Array<keyof typeof Icons>).map(iconName => {
               const IconComponent = Icons[iconName];
+              const isDeprecated = deprecatedIcons.includes(IconComponent);
               return (
                 <div
-                  className="flex flex-col gap-y-4 border rounded p-4 items-center justify-center"
+                  className={classnames(
+                    'flex flex-col gap-y-4 border rounded p-4 items-center justify-center',
+                    { 'opacity-40': isDeprecated },
+                  )}
                   key={iconName}
                 >
                   <IconComponent />