# svg-to-jsx

## Interface

```typescript
interface parser {
  name: 'svg-to-jsx';
  output: {
    type: 'directory';
    directoryPath: string;
  };
  options?:{
    reactVersion?: string;
    tsx?: boolean;
    filePrefix?: string;
    fileSuffix?: string;
    exportDefault?: boolean;
    tokenNameTemplate?: string;
  }
}
```

## Options

<table data-full-width="true"><thead><tr><th width="223">Parameter</th><th width="118">Required</th><th width="114">Type</th><th width="147">Default</th><th>Description</th></tr></thead><tbody><tr><td><code>reactVersion</code></td><td><code>false</code></td><td><code>string</code></td><td><pre><code>17.0.0
</code></pre></td><td>The React version you're using. Depending on your version, this parser will automatically import <code>React</code> in your JSX component.</td></tr><tr><td><code>tsx</code></td><td><code>false</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Set this to <code>true</code> if you want to generate a TSX component instead of JSX.</td></tr><tr><td><code>filePrefix</code></td><td><code>false</code></td><td><code>string</code></td><td><code>''</code></td><td>Add an arbitrary content at the beginning of the generated file.</td></tr><tr><td><code>fileSuffix</code></td><td><code>false</code></td><td><code>string</code></td><td><code>''</code></td><td>Add an arbitrary content at the end of the generated file.</td></tr><tr><td><code>exportDefault</code></td><td><code>false</code></td><td><code>boolean</code></td><td><code>true</code></td><td>Whether use named or default export.</td></tr><tr><td><code>tokenNameTemplate</code></td><td><code>false</code></td><td><code>string</code></td><td><code>'{{token}}'</code></td><td>Change the template of the generated named export.</td></tr></tbody></table>

## Basic usage

{% tabs %}
{% tab title="Input" %}
{% code lineNumbers="true" %}

```json
{
  "icons": {
    "menu": {
      "$type": "vector",
      "$value": {
        "default": {
          "variationLabel": null,
          "format": "svg",
          "url": "<url-of-your-svg-file>"
        }
      }
    }
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Config" %}
{% code title=".specifyrc.json" lineNumbers="true" %}

```json
{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate JSX components",
      "parsers": [
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="Output" %}
{% code title="output/assets/icons/menu.jsx" lineNumbers="true" %}

```jsx
export default () => (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.25 9.25V3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V9.25H9.25ZM9.25 10.75H3.5V16C3.5 16.2761 3.72386 16.5 4 16.5H9.25V10.75ZM10.75 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V10.75H10.75V16.5ZM4 18C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H10H16C17.1046 2 18 2.89543 18 4V10V16C18 17.1046 17.1046 18 16 18H4ZM16.5 9.25V4C16.5 3.72386 16.2761 3.5 16 3.5H10.75V9.25H16.5Z" fill="#788BA5" />
    </svg>
);
```

{% endcode %}
{% endtab %}
{% endtabs %}