move SVG info to cards page

Author: ethanpalm

components/cards.mdx

@@ -92,7 +92,14 @@ You can group cards in [columns](/components/columns).
 
 <ResponseField name="icon" type="string or svg">
   A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
-  icon](https://lucide.dev/icons), or SVG code in `icon={}`
+  icon](https://lucide.dev/icons), or JSX compatible SVG code in `icon={}`.
+
+  To generate JSX compatible SVG code:
+
+  1. Use the [SVGR converter](https://react-svgr.com/playground/).
+  2. Copy the code inside the `<svg/>` tag.
+  3. Paste the code into your card. Make sure to only copy and paste the code inside the `<svg/>` tag.
+  4. You may need to decrease the height and width to make the image fit.
 </ResponseField>
 
 <ResponseField name="iconType" type="string">

support.mdx

@@ -39,17 +39,6 @@ export function openSearch(e) {
   </Accordion>
 
 
-  <Accordion title="Issues adding SVG to a card" icon="image">
-  We support a specific type of SVG, called JSX, and as such the image will need to be converted.
-
-  1. Use the [SVGR converter](https://react-svgr.com/playground/) to generate JSX compatible SVG code.
-  2. Copy the code inside the `<svg/>` tag.
-
-  ![Output from the SVGR converter with the code inside <svg> and </svg> tags highlighted.](/images/svg-jsx.png)
-
-  3. Paste the code into your card. Make sure you only copy and paste the code inside the `<svg/>` tag.
-  4. You may need to decrease the height and width to make the image fit.
-  </Accordion>
 </AccordionGroup>
 
 <Info>