Update lock icon

hypothesis · Nov 11, 2024 · 91d4822 · 91d4822
1 parent 89498a0
commit 91d4822
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 16 deletions.
diff --git a/images/icons/lock.svg b/images/icons/lock.svg
diff --git a/src/components/icons/Lock.tsx b/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>
   );
 }
diff --git a/src/components/icons/LockAlt.tsx b/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 (

diff --git a/src/components/icons/LockAltFilled.tsx b/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 (

diff --git a/src/pattern-library/components/patterns/data/IconsPage.tsx b/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 />