feat: add outline for icons

davidleger95 · Nov 28, 2023 · c668cda · c668cda
1 parent c07b0b7
commit c668cda
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -6,18 +6,37 @@ const StyledTag = styled.div`
   font-size: 0.8rem;
 `;
 
+const IconContainer = styled.div`
+  display: inline-grid;
+  grid-template-areas: icon;
+  justify-items: center;
+  align-items: center;
+`;
+
 const Icon = styled.i`
-  background-color: #fff;
   padding: 2px;
   border-radius: 3px;
+  grid-area: icon;
+`;
+
+const IconOutline = styled.i`
+  grid-area: icon;
+  paint-order: stroke fill;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: white;
 `;
 
 export type Props = { label: string; icon?: string; colored?: boolean };
 
 const Tag = ({ label, icon, colored = true }: Props) => {
   return (
     <StyledTag>
-      {icon && <Icon className={`devicon-${icon} ${colored && 'colored'}`} />}{' '}
+      {icon && (
+        <IconContainer>
+          <IconOutline className={`devicon-${icon}`} />
+          <Icon className={`devicon-${icon} ${colored && 'colored'}`} />
+        </IconContainer>
+      )}{' '}
       {label}
     </StyledTag>
   );