Remove "icon.scss"

src/components/icon.tsx

@@ -19,10 +19,10 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
 const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
   return (
     <div
-      className={clsx('svg-icon', className)}
+      className={clsx('flex size-4 items-center justify-center transition duration-200', className)}
       {...rest}
     >
-      <InlineSVG src={src} title={alt} loader={<></>} />
+      <InlineSVG className='size-full transition duration-200' src={src} title={alt} loader={<></>} />
     </div>
   );
 };

src/components/polls/poll-option.tsx

@@ -151,7 +151,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                   className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
               ) : (
-                <div className='svg-icon' />
+                <div className='flex size-4 items-center justify-center transition duration-200' />
               )}
 
               <div className='text-primary-600 dark:text-white'>

src/styles/application.scss

@@ -3,5 +3,4 @@
 @use 'accessibility';
 
 // COMPONENTS
-@use 'components/compose-form';
+@use 'components/compose-form';
-@use 'components/icon';

src/styles/components/icon.scss

@@ -1,21 +0,0 @@
-.svg-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 0.2s;
-
-  svg {
-    // Apparently this won't skew the image as long as it has a viewbox
-    width: 100%;
-    height: 100%;
-    transition: 0.2s;
-  }
-}
-
-.icon-button > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/styles/tailwind.css

@@ -95,7 +95,7 @@
 
   .error-column > span {
       @apply max-w-[400px];
-    }
+  }
     
   .error-column {
     .svg-icon {