🐛 Use CSS imports to fix svg icons

Author: Frontendland

src/components/Accordion/Accordion.astro

@@ -1,6 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+import './accordion.scss'
 
 interface Props extends AccordionProps {}
 
@@ -38,7 +39,3 @@ const {
         })
     })
 </script>
-
-<style lang="scss">
-    @import './accordion.scss';
-</style>

src/components/Accordion/Accordion.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
     import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import './accordion.scss'
 
     export let items: AccordionProps['items']
 
@@ -33,7 +34,3 @@
         </li>
     {/each}
 </ul>
-
-<style lang="scss">
-    @import './accordion.scss';
-</style>

src/pages/accordion.astro

@@ -32,6 +32,6 @@ const accordionItems = [{
 
         <ComponentWrapper type="React">
             <ReactAccordion items={accordionItems} client:load />
-        </ComponentWrapper>
+        </ComponentWrapper> 
     </div>
 </Layout>