[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SLB.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SLB: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M2 21H1C0.4475 21 0 20.5525 0 20V18L22 3H23C23.5525 3 24 3.4475 24 4V6L2 21Z"
      fill="#FAFD00"
    />
    <path d="M23 21H2L24 6V20C24 20.5525 23.5525 21 23 21Z" fill="#048204" />
    <path d="M1 3H22L0 18V4C0 3.4475 0.4475 3 1 3Z" fill="#040385" />
    <path
      d="M7.25905 5.211H6.20605L5.76355 4.25L5.32055 5.211H4.26855L5.03705 6.004L4.75305 7.16L5.76355 6.587L6.77455 7.16L6.48955 6.004L7.25905 5.211Z"
      fill="white"
    />
    <path
      d="M3.99999 8.63H3.30949L3.01849 8L2.72849 8.63H2.03699L2.54099 9.1515L2.35449 9.9095L3.01849 9.5335L3.68049 9.9095L3.49499 9.1515L3.99999 8.63Z"
      fill="white"
    />
    <path
      d="M5.99999 10.7205H5.30949L5.01849 10.0905L4.72849 10.7205H4.03699L4.54099 11.242L4.35449 12L5.01849 11.624L5.68049 12L5.49499 11.242L5.99999 10.7205Z"
      fill="white"
    />
    <path
      d="M10 8.051H8.94753L8.50503 7.09L8.06153 8.051H7.00903L7.77853 8.844L7.49403 10L8.50503 9.426L9.51553 10L9.23053 8.844L10 8.051Z"
      fill="white"
    />
  </svg>
)

export default SLB

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ARM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ARM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#FE0000"
    />
    <path d="M24 9H0V15H24V9Z" fill="#0000AA" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#FE9900"
    />
  </svg>
)

export default ARM

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SYC.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SYC: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20L24 15V20Z"
      fill="#3C9038"
    />
    <path d="M0 20L24 15V10L0 20Z" fill="#E6E6E6" />
    <path d="M0 20L21 3H11L0 20Z" fill="#F8D406" />
    <path d="M0 20L11 3H1C0.4475 3 0 3.4475 0 4V20Z" fill="#1C437A" />
    <path d="M24 4C24 3.4475 23.5525 3 23 3H21L0 20L24 10V4Z" fill="#D12325" />
  </svg>
)

export default SYC

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ERI.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ERI: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V19L24 15V20Z"
      fill="#1799B3"
    />
    <path d="M24 15L0 19V5L24 9V15Z" fill="#D1142A" />
    <path
      d="M24 9L0 5V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#439845"
    />
    <path
      d="M5 8C3.0705 8 1.5 9.5705 1.5 11.5C1.5 13.4295 3.0705 15 5 15C6.9295 15 8.5 13.4295 8.5 11.5C8.5 9.5705 6.9295 8 5 8ZM5 14C3.621 14 2.5 12.879 2.5 11.5C2.5 10.121 3.621 9 5 9C6.379 9 7.5 10.121 7.5 11.5C7.5 12.879 6.379 14 5 14Z"
      fill="#FFFF00"
    />
  </svg>
)

export default ERI

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/NLD.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const NLD: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#21468C"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#AE1C27"
    />
  </svg>
)

export default NLD

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/KEN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const KEN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#3C3C3C"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V14H24V20Z"
      fill="#0E6731"
    />
    <path d="M24 9H0V15H24V9Z" fill="#BD1D27" />
    <path d="M24 9H0V10H24V9Z" fill="white" />
    <path d="M24 14H0V15H24V14Z" fill="white" />
    <path
      d="M10.6043 15.0004L8 16.4896L8.4964 17.3577L11.1007 15.8685L10.6043 15.0004Z"
      fill="white"
    />
    <path
      d="M13.3957 15.0008L12.8993 15.8689L15.5036 17.3581L16 16.49L13.3957 15.0008Z"
      fill="white"
    />
    <path
      d="M8.49628 6.6424L7.99988 7.5105L10.6042 8.9997L11.1006 8.1316L8.49628 6.6424Z"
      fill="white"
    />
    <path
      d="M15.5037 6.64239L12.8994 8.13159L13.3958 8.99969L16.0001 7.51049L15.5037 6.64239Z"
      fill="white"
    />
    <path d="M14 8L12 7L10 8V16L12 17L14 16V8Z" fill="#3C3C3C" />
  </svg>
)

export default KEN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SUR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SUR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#3A7942"
    />
    <path d="M24 9H0V15H24V9Z" fill="#B5092F" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#3A7942"
    />
    <path
      d="M14.124 11.203H12.628L12 9.842L11.372 11.2035H9.87598L10.969 12.3345L10.5645 13.974L12 13.158L13.4355 13.9735L13.0315 12.334L14.124 11.203Z"
      fill="#E7CE02"
    />
    <path d="M24 8H0V9H24V8Z" fill="white" />
    <path d="M24 15H0V16H24V15Z" fill="white" />
  </svg>
)

export default SUR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SWZ.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SWZ: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 7H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V7Z"
      fill="#3C5BBC"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V17H24V20Z"
      fill="#3C5BBC"
    />
    <path d="M24 8H0V16H24V8Z" fill="#BD1D27" />
    <path d="M24 7H0V8H24V7Z" fill="#FFDB00" />
    <path d="M24 16H0V17H24V16Z" fill="#FFDB00" />
    <path d="M11 13H5V14H11V13Z" fill="#FFDB00" />
    <path d="M11 10H5V11H11V10Z" fill="#FFDB00" />
    <path d="M19 13H13V14H19V13Z" fill="#FFDB00" />
    <path d="M19 10H13V11H19V10Z" fill="#FFDB00" />
    <path
      d="M9 12C9 13.657 10.3435 15 12 15V9C10.3435 9 9 10.343 9 12Z"
      fill="#3C3C3C"
    />
    <path
      d="M15 12C15 13.657 13.6565 15 12 15V9C13.6565 9 15 10.343 15 12Z"
      fill="white"
    />
  </svg>
)

export default SWZ

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/PRT.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const PRT: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M9 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H9V21Z"
      fill="#006600"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H9V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#FE0000"
    />
    <path
      d="M9 14C10.6569 14 12 12.6569 12 11C12 9.34315 10.6569 8 9 8C7.34315 8 6 9.34315 6 11C6 12.6569 7.34315 14 9 14Z"
      fill="#FAFB00"
    />
  </svg>
)

export default PRT

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/NZL.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const NZL: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M23 3H1C0.734784 3 0.48043 3.10536 0.292893 3.29289C0.105357 3.48043 0 3.73478 0 4L0 20C0 20.2652 0.105357 20.5196 0.292893 20.7071C0.48043 20.8946 0.734784 21 1 21H23C23.2652 21 23.5196 20.8946 23.7071 20.7071C23.8946 20.5196 24 20.2652 24 20V4C24 3.73478 23.8946 3.48043 23.7071 3.29289C23.5196 3.10536 23.2652 3 23 3Z"
        fill="#0F2E72"
      />
      <path d="M9.5 9.5H8V9.625L11.1665 12H12V11.375L9.5 9.5Z" fill="#FF0000" />
      <path
        d="M0.0599365 3.67001L2.49994 5.50001H3.99994V5.37501L0.852936 3.01501C0.673651 3.04166 0.505041 3.11674 0.365293 3.23217C0.225546 3.3476 0.119964 3.49899 0.0599365 3.67001Z"
        fill="#FF0000"
      />
      <path d="M12 3H11.167L8 5.375V5.5H9.5005L12 3.625V3Z" fill="#FF0000" />
      <path d="M0 11.375V12H0.8335L4 9.625V9.5H2.5L0 11.375Z" fill="#FF0000" />
      <path d="M12 6.5H7V3H5V6.5H0V8.5H5V12H7V8.5H12V6.5Z" fill="#FF0000" />
      <path
        d="M20 15.6H19.05L18.65 14.735L18.25 15.6H17.3075L18 16.314L17.7445 17.355L18.6545 16.839L19.5645 17.355L19.308 16.314L20 15.6Z"
        fill="#FF0000"
      />
      <path
        d="M16.973 10.6885H16.2785L15.987 10.0545L15.6945 10.6885H15L15.5075 11.2115L15.3205 11.974L15.987 11.5955L16.6535 11.974L16.4655 11.2115L16.973 10.6885Z"
        fill="#FF0000"
      />
      <path
        d="M22.1405 10.634H21.446L21.154 10L20.8615 10.634H20.1675L20.675 11.157L20.4875 11.9195L21.154 11.541L21.8205 11.9195L21.6325 11.157L22.1405 10.634Z"
        fill="#FF0000"
      />
      <path
        d="M19.6405 7.634H18.946L18.654 7L18.3615 7.634H17.6675L18.175 8.157L17.9875 8.9195L18.654 8.541L19.3205 8.9195L19.1325 8.157L19.6405 7.634Z"
        fill="#FF0000"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default NZL

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/KHM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const KHM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 8H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V8Z"
      fill="#08339E"
    />
    <path d="M24 8H0V16H24V8Z" fill="#DD0B2D" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V16H24V20Z"
      fill="#08339E"
    />
    <path
      d="M17 13V11L16 10L15 11V13H13V10L12 9L11 10V13H9V11L8 10L7 11V13L6 15H18L17 13Z"
      fill="white"
    />
  </svg>
)

export default KHM

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ISR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ISR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0 20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V19H0V20Z"
      fill="#E6E6E6"
    />
    <path
      d="M23 3H1C0.4475 3 0 3.4475 0 4V5H24V4C24 3.4475 23.5525 3 23 3Z"
      fill="#E6E6E6"
    />
    <path d="M24 5H0V9H24V5Z" fill="#0C72C4" />
    <path d="M24 15H0V19H24V15Z" fill="#0C72C4" />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M13.333 12L14 11H12.667L12 10L11.333 11H10L10.667 12L10 13H11.333L12 14L12.667 13H14L13.333 12Z"
      fill="#0C72C4"
    />
  </svg>
)

export default ISR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/BLZ.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const BLZ: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V19H24V20Z"
      fill="#D1142A"
    />
    <path d="M24 5H0V19H24V5Z" fill="#033E8A" />
    <path
      d="M24 5H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V5Z"
      fill="#D1142A"
    />
    <path
      d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
      fill="white"
    />
    <path
      d="M12 10C12.2761 10 12.5 9.77614 12.5 9.5C12.5 9.22386 12.2761 9 12 9C11.7239 9 11.5 9.22386 11.5 9.5C11.5 9.77614 11.7239 10 12 10Z"
      fill="#7AC943"
    />
    <path
      d="M12 15C12.2761 15 12.5 14.7761 12.5 14.5C12.5 14.2239 12.2761 14 12 14C11.7239 14 11.5 14.2239 11.5 14.5C11.5 14.7761 11.7239 15 12 15Z"
      fill="#7AC943"
    />
    <path
      d="M14.0964 10.5486C14.2883 10.3497 14.2828 10.033 14.084 9.84127C13.8853 9.64954 13.5686 9.65539 13.3767 9.85433C13.1848 10.0533 13.1903 10.37 13.389 10.5617C13.5878 10.7534 13.9045 10.7476 14.0964 10.5486Z"
      fill="#7AC943"
    />
    <path
      d="M10.6227 14.1467C10.8147 13.9483 10.8095 13.6317 10.611 13.4397C10.4126 13.2477 10.096 13.253 9.90405 13.4514C9.71204 13.6499 9.71728 13.9664 9.91575 14.1584C10.1142 14.3504 10.4307 14.3452 10.6227 14.1467Z"
      fill="#7AC943"
    />
    <path
      d="M14.5157 12.4123C14.792 12.4023 15.0078 12.1705 14.9978 11.8945C14.9879 11.6186 14.7559 11.403 14.4796 11.413C14.2034 11.4229 13.9876 11.6547 13.9975 11.9307C14.0075 12.2066 14.2395 12.4222 14.5157 12.4123Z"
      fill="#7AC943"
    />
    <path
      d="M9.51831 12.5882C9.79429 12.5787 10.0103 12.3471 10.0009 12.0709C9.99144 11.7946 9.76005 11.5783 9.48407 11.5878C9.2081 11.5972 8.99204 11.8288 9.00149 12.1051C9.01095 12.3813 9.24233 12.5976 9.51831 12.5882Z"
      fill="#7AC943"
    />
    <path
      d="M14.2293 14.0081C14.4142 13.8029 14.3976 13.4866 14.1923 13.3016C13.9869 13.1165 13.6706 13.1328 13.4858 13.3379C13.3009 13.543 13.3174 13.8593 13.5228 14.0444C13.7281 14.2294 14.0444 14.2132 14.2293 14.0081Z"
      fill="#7AC943"
    />
    <path
      d="M10.5123 10.6621C10.6974 10.4568 10.6813 10.1406 10.4764 9.95592C10.2715 9.77123 9.95533 9.78796 9.77027 9.99328C9.5852 10.1986 9.6013 10.5148 9.80621 10.6995C10.0111 10.8842 10.3273 10.8674 10.5123 10.6621Z"
      fill="#7AC943"
    />
    <path d="M13 11H11V13H13V11Z" fill="#B5B994" />
  </svg>
)

export default BLZ

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GGY.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GGY: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#E6E6E6"
    />
    <path d="M13 3H11V21H13V3Z" fill="#E4122D" />
    <path d="M24 11H0V13H24V11Z" fill="#E4122D" />
    <path
      d="M16 11H13V8L14 7H10L11 8V11H8L7 10V14L8 13H11V16L10 17H14L13 16V13H16L17 14V10L16 11Z"
      fill="#E2C914"
    />
  </svg>
)

export default GGY

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GHA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GHA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#D22129"
    />
    <path d="M24 9H0V15H24V9Z" fill="#F1D711" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#08703B"
    />
    <path
      d="M14.124 11.203H12.628L12 9.84198L11.372 11.2035H9.87598L10.969 12.3345L10.5645 13.974L12 13.158L13.4355 13.9735L13.0315 12.334L14.124 11.203Z"
      fill="#000105"
    />
  </svg>
)

export default GHA

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/PHL.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const PHL: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 12H10L1 3H23C23.5525 3 24 3.4475 24 4V12Z" fill="#073CA5" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1L10 12H24V20Z"
      fill="#D7141A"
    />
    <path
      d="M1 3C0.4475 3 0 3.4475 0 4V12V20C0 20.5525 0.4475 21 1 21L10 12L1 3Z"
      fill="#E6E6E6"
    />
    <path
      d="M4.5 10C3.3955 10 2.5 10.8955 2.5 12C2.5 13.1045 3.3955 14 4.5 14C5.6045 14 6.5 13.1045 6.5 12C6.5 10.8955 5.6045 10 4.5 10Z"
      fill="#EFD358"
    />
  </svg>
)

export default PHL

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/QAT.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const QAT: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H8V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#6F1B3D"
    />
    <path
      d="M8 8L11 6L8 4V3H1C0.4475 3 0 3.4475 0 4V20C0 20.5525 0.4475 21 1 21H8V20L11 18L8 16L11 14L8 12L11 10L8 8Z"
      fill="#E6E6E6"
    />
  </svg>
)

export default QAT

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CHE.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CHE: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#DA1E05"
    />
    <path
      d="M17.5 14H6.5C6.224 14 6 13.776 6 13.5V10.5C6 10.224 6.224 10 6.5 10H17.5C17.776 10 18 10.224 18 10.5V13.5C18 13.776 17.776 14 17.5 14Z"
      fill="white"
    />
    <path
      d="M13.5 18H10.5C10.224 18 10 17.776 10 17.5V6.5C10 6.224 10.224 6 10.5 6H13.5C13.776 6 14 6.224 14 6.5V17.5C14 17.776 13.776 18 13.5 18Z"
      fill="white"
    />
  </svg>
)

export default CHE

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CIV.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CIV: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#EE7F25"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#0E9E60"
    />
    <path d="M16 3H8V21H16V3Z" fill="#E6E6E6" />
  </svg>
)

export default CIV

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MEX.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MEX: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3.25H8V21.25H16V3.25Z" fill="#E6E6E6" />
    <path
      d="M24 20.25C24 20.8025 23.5525 21.25 23 21.25H16V3.25H23C23.5525 3.25 24 3.6975 24 4.25V20.25Z"
      fill="#D30F25"
    />
    <path
      d="M8 21.25H1C0.4475 21.25 0 20.8025 0 20.25V4.25C0 3.6975 0.4475 3.25 1 3.25H8V21.25Z"
      fill="#006847"
    />
    <path
      d="M12 9.25C10.344 9.25 9 10.594 9 12.25C9 13.9065 10.344 15.25 12 15.25C13.6565 15.25 15 13.9065 15 12.25C15 10.594 13.6565 9.25 12 9.25ZM12 14.25C10.8955 14.25 10 13.3545 10 12.25C10 11.1455 10.8955 10.25 12 10.25C13.1045 10.25 14 11.1455 14 12.25C14 13.3545 13.1045 14.25 12 14.25Z"
      fill="#6B422E"
    />
  </svg>
)

export default MEX

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MKD.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MKD: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#C60B1E"
    />
    <path d="M13 21L12 13L11 21H13Z" fill="#FFC300" />
    <path d="M24 11L13 12L24 13V11Z" fill="#FFC300" />
    <path d="M0 13L11 12L0 11V13Z" fill="#FFC300" />
    <path
      d="M24 4C24 3.4475 23.552 3 23 3H22L12 11L2 3H1C0.448 3 0 3.4475 0 4V5L11 12L0 19V20C0 20.5525 0.448 21 1 21H2L12 13L22 21H23C23.552 21 24 20.5525 24 20V19L13 12L24 5V4Z"
      fill="#FFC300"
    />
    <path d="M11 3L12 11L13 3H11Z" fill="#FFC300" />
    <path
      d="M12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5Z"
      fill="#C60B1E"
    />
    <path
      d="M12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5Z"
      fill="#FFC300"
    />
  </svg>
)

export default MKD

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CRI.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CRI: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V18H24V20Z"
      fill="#1D266B"
    />
    <path d="M24 9H0V15H24V9Z" fill="#EA212D" />
    <path
      d="M24 6H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V6Z"
      fill="#1D266B"
    />
    <path d="M24 15H0V18H24V15Z" fill="#E6E6E6" />
    <path d="M24 6H0V9H24V6Z" fill="#E6E6E6" />
    <path
      d="M7 10C5.8955 10 5 10.8955 5 12C5 13.1045 5.8955 14 7 14C8.1045 14 9 13.1045 9 12C9 10.8955 8.1045 10 7 10ZM7 13C6.4475 13 6 12.5525 6 12C6 11.4475 6.4475 11 7 11C7.5525 11 8 11.4475 8 12C8 12.5525 7.5525 13 7 13Z"
      fill="white"
    />
  </svg>
)

export default CRI

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/FLK.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const FLK: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M23 3H1C0.734784 3 0.48043 3.10536 0.292893 3.29289C0.105357 3.48043 0 3.73478 0 4L0 20C0 20.2652 0.105357 20.5196 0.292893 20.7071C0.48043 20.8946 0.734784 21 1 21H23C23.2652 21 23.5196 20.8946 23.7071 20.7071C23.8946 20.5196 24 20.2652 24 20V4C24 3.73478 23.8946 3.48043 23.7071 3.29289C23.5196 3.10536 23.2652 3 23 3Z"
        fill="#0F2E72"
      />
      <path d="M9.5 9.5H8V9.625L11.1665 12H12V11.375L9.5 9.5Z" fill="#FF0000" />
      <path
        d="M0.0599365 3.67001L2.49994 5.50002H3.99994V5.37502L0.852936 3.01501C0.673651 3.04166 0.505041 3.11674 0.365293 3.23217C0.225546 3.3476 0.119964 3.49899 0.0599365 3.67001Z"
        fill="#FF0000"
      />
      <path d="M12 3H11.167L8 5.375V5.5H9.5005L12 3.625V3Z" fill="#FF0000" />
      <path d="M0 11.375V12H0.8335L4 9.625V9.5H2.5L0 11.375Z" fill="#FF0000" />
      <path d="M12 6.5H7V3H5V6.5H0V8.5H5V12H7V8.5H12V6.5Z" fill="#FF0000" />
      <path
        d="M21 15.5C21 16.5 18 18 18 18C18 18 15 16.5 15 15.5V11H21V15.5Z"
        fill="#2F70BE"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default FLK

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CPV.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CPV: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V17H24V20Z"
      fill="#2E3094"
    />
    <path d="M24 16H0V17H24V16Z" fill="white" />
    <path d="M24 15H0V16H24V15Z" fill="#D1142A" />
    <path d="M24 14H0V15H24V14Z" fill="white" />
    <path
      d="M24 14H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V14Z"
      fill="#2E3094"
    />
    <path
      d="M8.0725 10.6495H7.342L7.0365 9.9845L6.73 10.6495H6L6.533 11.1995L6.336 12L7.036 11.6025L7.736 12L7.539 11.199L8.0725 10.6495Z"
      fill="#E8D313"
    />
    <path
      d="M8.0725 17.665H7.342L7.036 17L6.7295 17.665H6L6.533 18.215L6.3355 19.016L7.0355 18.6185L7.7355 19.016L7.5385 18.215L8.0725 17.665Z"
      fill="#E8D313"
    />
    <path
      d="M10.4559 12.4499L9.93042 11.9419L10.1734 11.2504L9.48992 11.5159L8.96442 11.0099L8.96642 11.7754L8.26892 12.2149L9.04842 12.4139L9.27592 13.1874L9.68992 12.4734L10.4559 12.4499Z"
      fill="#E8D313"
    />
    <path
      d="M5.58302 17.496L5.05752 16.989L5.29952 16.2975L4.61702 16.563L4.09152 16.056L4.09352 16.8215L3.39502 17.261L4.17552 17.461L4.40202 18.2335L4.81602 17.5195L5.58302 17.496Z"
      fill="#E8D313"
    />
    <path
      d="M10.92 15.4015L10.8945 14.671L11.551 14.343L10.874 14.059L10.8475 13.3295L10.316 13.882L9.50952 13.714L9.93252 14.3975L9.55852 15.1125L10.3525 14.887L10.92 15.4015Z"
      fill="#E8D313"
    />
    <path
      d="M3.90994 15.6455L3.88344 14.916L4.53894 14.587L3.86294 14.304L3.83644 13.5745L3.30594 14.1265L2.49744 13.9585L2.92144 14.644L2.54644 15.357L3.34044 15.1315L3.90994 15.6455Z"
      fill="#E8D313"
    />
    <path
      d="M9.20303 17.8465L9.69353 17.3025L10.3925 17.5225L10.1035 16.8485L10.592 16.3055L9.82553 16.334L9.36153 15.6535L9.19153 16.4385L8.42603 16.6925L9.15253 17.081L9.20303 17.8465Z"
      fill="#E8D313"
    />
    <path
      d="M3.99191 13.1524L4.47941 12.6094L5.17941 12.8269L4.89041 12.1549L5.37691 11.6119L4.61341 11.6394L4.14841 10.9579L3.97641 11.7449L3.21191 11.9969L3.93941 12.3864L3.99191 13.1524Z"
      fill="#E8D313"
    />
  </svg>
)

export default CPV

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SYR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SYR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#000105"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#CC162C"
    />
    <path
      d="M10.1565 11.3065H8.68253L8.06453 9.96451L7.44603 11.3065H5.97253L7.04903 12.42L6.65103 14.035L8.06453 13.2325L9.47803 14.035L9.08003 12.42L10.1565 11.3065Z"
      fill="#0E783D"
    />
    <path
      d="M17.9999 11.3065H16.5259L15.9079 9.96451L15.2894 11.3065H13.8159L14.8924 12.42L14.4944 14.035L15.9079 13.2325L17.3214 14.035L16.9234 12.42L17.9999 11.3065Z"
      fill="#0E783D"
    />
  </svg>
)

export default SYR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/EGY.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const EGY: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#3C3C3C"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#CC162C"
    />
    <path d="M14 10H10V12.666L12 14L14 12.666V10Z" fill="#EFD358" />
  </svg>
)

export default EGY

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/PSE.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const PSE: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 9H7L1 3H23C23.5525 3 24 3.4475 24 4V9Z" fill="#2D2D2D" />
    <path d="M24 15H7L10 12L7 9H24V15Z" fill="#E6E6E6" />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H1L7 15H24V20Z" fill="#0EA651" />
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L10 12L1 3Z"
      fill="#D81D38"
    />
  </svg>
)

export default PSE

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/IDN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const IDN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#E6E6E6"
    />
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#CC162C"
    />
  </svg>
)

export default IDN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/VEN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const VEN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#FDCB08"
    />
    <path d="M24 9H0V15H24V9Z" fill="#00287A" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#D0142C"
    />
    <path
      d="M13.0645 11.6475H12.3145L12 10.965L11.6855 11.6475H10.9355L11.4835 12.2135L11.2815 13.0355L12 12.627L12.719 13.035L12.517 12.213L13.0645 11.6475Z"
      fill="white"
    />
    <path
      d="M9.129 12.6825H8.379L8.0645 12L7.75 12.6825H7L7.548 13.2485L7.346 14.0705L8.065 13.6625L8.7835 14.0705L8.5815 13.2485L9.129 12.6825Z"
      fill="white"
    />
    <path
      d="M17.129 12.6825H16.379L16.0645 12L15.75 12.6825H15L15.548 13.2485L15.346 14.0705L16.065 13.6625L16.7835 14.0705L16.5815 13.2485L17.129 12.6825Z"
      fill="white"
    />
  </svg>
)

export default VEN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SVK.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SVK: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#DD2026"
    />
    <path d="M24 9H0V15H24V9Z" fill="#0038A7" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#E6E6E6"
    />
    <path
      d="M9 7H3V12.465C3 12.7995 3.167 13.1115 3.4455 13.297L6 15L8.5545 13.297C8.833 13.1115 9 12.799 9 12.465V7Z"
      fill="#EE1E2E"
    />
    <path d="M8 8H4V9H8V8Z" fill="white" />
    <path d="M7 10H5V11H7V10Z" fill="white" />
    <path d="M7 12H5V13H7V12Z" fill="white" />
  </svg>
)

export default SVK

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SAU.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SAU: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#0B6B37"
    />
    <path
      d="M19 7V8H16V9H19V10H16V11H19V12H16V13H19V14H15V12V11V10H14V11H13V12H14V14H12V9H11V14H10V9H9V14H8V12V11H7H5V10H8V9H5V7H4V9V10V11V12V14V15H5H7H8H19H20V14V9V8V7H19ZM5 14V12H7V14H5Z"
      fill="white"
    />
    <path d="M7 7H6V8H7V7Z" fill="white" />
    <path d="M12 7H9V8H12V7Z" fill="white" />
    <path d="M15 8H13V9H15V8Z" fill="white" />
    <path d="M20 17H4V18H20V17Z" fill="white" />
  </svg>
)

export default SAU

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SLE.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SLE: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#1C73BA"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#27B34A"
    />
  </svg>
)

export default SLE

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/TLS.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const TLS: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7.1845 11.2715H5.711L5.092 9.9295L4.474 11.2715H3L4.076 12.385L3.6785 14L5.0915 13.1975L6.506 14L6.1075 12.385L7.1845 11.2715Z"
      fill="#D21F22"
    />
    <path
      d="M23 3H1L11 12L1 21H23C23.5525 21 24 20.5525 24 20V12V4C24 3.4475 23.5525 3 23 3Z"
      fill="#DA2728"
    />
    <path d="M14 12L1 3L11 12L1 21L14 12Z" fill="#FEC63C" />
    <path
      d="M1 3C0.4475 3 0 3.4475 0 4V12V20C0 20.5525 0.4475 21 1 21L11 12L1 3Z"
      fill="black"
    />
    <path
      d="M6.1845 11.2715H4.71L4.093 9.9295L3.474 11.2715H2L3.077 12.385L2.6785 14L4.0925 13.1975L5.506 14L5.1085 12.385L6.1845 11.2715Z"
      fill="white"
    />
  </svg>
)

export default TLS

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CAN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CAN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3H8V21H16V3Z" fill="#E6E6E6" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#FE0000"
    />
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#FE0000"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M12.4375 15.344C12.4375 15.344 12.2195 13.677 12.3295 13.6945C13.2495 13.837 13.683 13.9035 13.683 13.9035C13.206 13.0025 14.4045 12.5665 15.0205 12.0425C14.543 11.881 14.608 11.94 14.9155 10.7935C13.9185 11.11 14 11.0175 13.7885 10.523C13.7885 10.523 13.711 10.6115 13.087 11.316C12.998 11.4165 12.849 11.3495 12.88 11.196C13.205 9.58849 13.2215 9.52299 13.2215 9.52299C12.5885 9.90499 12.612 9.92699 12.512 9.72949C12.1645 9.05199 12 8.71899 12 8.71899C12 8.71899 11.8355 9.05249 11.488 9.72899C11.3875 9.92599 11.411 9.90449 10.778 9.52249C10.778 9.52249 10.794 9.58799 11.1195 11.1955C11.151 11.349 11.0015 11.4165 10.9125 11.3155C10.2885 10.611 10.2115 10.5225 10.2115 10.5225C9.99949 11.0175 10.082 11.1095 9.08449 10.793C9.39199 11.9395 9.45699 11.8805 8.97949 12.042C9.59599 12.566 10.7945 13.002 10.317 13.903C10.317 13.903 10.7505 13.8365 11.6705 13.694C11.7805 13.6765 11.594 15.375 11.594 15.375L12.4375 15.344Z"
      fill="#FE0000"
    />
  </svg>
)

export default CAN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/TWN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const TWN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 4C24 3.4475 23.5525 3 23 3H10V11H0V20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V4Z"
      fill="#FB0D1B"
    />
    <path d="M10 11H0V4C0 3.4475 0.4475 3 1 3H10V11Z" fill="#031092" />
    <path
      d="M5 9C6.10457 9 7 8.10457 7 7C7 5.89543 6.10457 5 5 5C3.89543 5 3 5.89543 3 7C3 8.10457 3.89543 9 5 9Z"
      fill="white"
    />
  </svg>
)

export default TWN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MUS.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MUS: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V17H24V20Z"
      fill="#0EA651"
    />
    <path d="M24 12H0V17H24V12Z" fill="#FFD505" />
    <path d="M24 7H0V12H24V7Z" fill="#2B2B69" />
    <path
      d="M24 7H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V7Z"
      fill="#E52635"
    />
  </svg>
)

export default MUS

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/JPN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const JPN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#E6E6E6"
    />
    <path
      d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
      fill="#BA0831"
    />
  </svg>
)

export default JPN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/POL.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const POL: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#DD153C"
    />
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#E6E6E6"
    />
  </svg>
)

export default POL

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/PLW.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const PLW: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#4AADD6"
    />
    <path
      d="M9 16C11.2091 16 13 14.2091 13 12C13 9.79086 11.2091 8 9 8C6.79086 8 5 9.79086 5 12C5 14.2091 6.79086 16 9 16Z"
      fill="#FFDE00"
    />
  </svg>
)

export default PLW

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ENG.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ENG: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#E6E6E6"
    />
    <path d="M24 10H14V3H10V10H0V14H10V21H14V14H24V10Z" fill="#FE0000" />
  </svg>
)

export default ENG

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/NRU.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const NRU: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V13H24V20Z"
      fill="#040385"
    />
    <path d="M24 11H0V13H24V11Z" fill="#FBFD02" />
    <path
      d="M24 11H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V11Z"
      fill="#040385"
    />
    <path
      d="M4.00004 14.5285L4.42754 15.7315L5.58104 15.183L5.03254 16.3365L6.23604 16.764L5.03254 17.192L5.58104 18.345L4.42754 17.797L4.00004 19L3.57254 17.797L2.41904 18.345L2.96754 17.192L1.76404 16.764L2.96754 16.3365L2.41904 15.183L3.57254 15.7315L4.00004 14.5285Z"
      fill="#FBFD02"
    />
  </svg>
)

export default NRU

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GUY.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GUY: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M1 3L19 12L1 21L23 12L1 3Z" fill="white" />
    <path d="M1 3L12 12L1 21L19 12L1 3Z" fill="#F3CF0B" />
    <path d="M12 12L1 3L10 12L1 21L12 12Z" fill="black" />
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L10 12L1 3Z"
      fill="#D00E30"
    />
    <path
      d="M23 3H1L23 12L1 21H23C23.552 21 24 20.552 24 20V12V4C24 3.448 23.552 3 23 3Z"
      fill="#009E49"
    />
  </svg>
)

export default GUY

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ETH.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ETH: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#108745"
    />
    <path d="M24 9H0V15H24V9Z" fill="#FDDC05" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#C60B1E"
    />
    <path
      d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
      fill="#20508E"
    />
    <path
      d="M14.1601 12L15.3151 9.99999H13.0056L12.0001 8.258L10.9941 9.99999H8.68457L9.83957 12L8.68457 14H10.9941L12.0001 15.742L13.0061 14H15.3156L14.1601 12ZM11.5716 13L10.9946 12L11.5716 11H12.4291L13.0061 12L12.4291 13H11.5716Z"
      fill="#FDDC05"
    />
  </svg>
)

export default ETH

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/BRN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const BRN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M0 9L18 21H21.6055L0 6.5965V9Z" fill="black" />
    <path
      d="M23 3H2.39453L24 17.4035V4C24 3.4475 23.5525 3 23 3Z"
      fill="#F6DE38"
    />
    <path d="M1 21H18L0 9V20C0 20.5525 0.4475 21 1 21Z" fill="#F6DE38" />
    <path
      d="M21.6055 21H23C23.5525 21 24 20.5525 24 20V17.4035L2.3945 3H1C0.4475 3 0 3.4475 0 4V6.5965L21.6055 21Z"
      fill="#E6E6E6"
    />
    <path
      d="M13 14.8575V10H16L15 9H13V8L12 7L11 8V9H9L8 10H11V14.8575C9.4415 14.45 8.257 13.134 8.051 11.5C8.0295 11.666 8 11.829 8 12C8 14.209 9.791 16 12 16C14.209 16 16 14.209 16 12C16 11.829 15.9705 11.666 15.949 11.5C15.743 13.134 14.5585 14.45 13 14.8575Z"
      fill="#FF0000"
    />
  </svg>
)

export default BRN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/CZE.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CZE: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 12H10L1 3H23C23.5525 3 24 3.4475 24 4V12Z" fill="#E6E6E6" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1L10 12H24V20Z"
      fill="#D7141A"
    />
    <path
      d="M1 3C0.448 3 0 3.448 0 4V12V20C0 20.552 0.448 21 1 21L10 12L1 3Z"
      fill="#11457E"
    />
  </svg>
)

export default CZE

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SGS.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SGS: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M23 3H1C0.734784 3 0.48043 3.10536 0.292893 3.29289C0.105357 3.48043 0 3.73478 0 4L0 20C0 20.2652 0.105357 20.5196 0.292893 20.7071C0.48043 20.8946 0.734784 21 1 21H23C23.2652 21 23.5196 20.8946 23.7071 20.7071C23.8946 20.5196 24 20.2652 24 20V4C24 3.73478 23.8946 3.48043 23.7071 3.29289C23.5196 3.10536 23.2652 3 23 3Z"
        fill="#0F2E72"
      />
      <path d="M9.5 9.5H8V9.625L11.1665 12H12V11.375L9.5 9.5Z" fill="#FF0000" />
      <path
        d="M0.0599365 3.67L2.49994 5.5H3.99994V5.375L0.852936 3.015C0.673651 3.04164 0.505041 3.11673 0.365293 3.23215C0.225546 3.34758 0.119964 3.49897 0.0599365 3.67Z"
        fill="#FF0000"
      />
      <path d="M12 3H11.167L8 5.375V5.5H9.5005L12 3.625V3Z" fill="#FF0000" />
      <path d="M0 11.375V12H0.8335L4 9.625V9.5H2.5L0 11.375Z" fill="#FF0000" />
      <path d="M12 6.5H7V3H5V6.5H0V8.5H5V12H7V8.5H12V6.5Z" fill="#FF0000" />
      <path
        d="M21 15.5C21 16.5 18 18 18 18C18 18 15 16.5 15 15.5V11H21V15.5Z"
        fill="#59442B"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default SGS

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/JEY.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const JEY: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 4C24 3.448 23.552 3 23 3L12 11L1 3C0.448 3 0 3.448 0 4L11 12L0 20C0 20.552 0.448 21 1 21L12 13L23 21C23.552 21 24 20.552 24 20L13 12L24 4Z"
      fill="#CE2029"
    />
    <path d="M0 4V20L11 12L0 4Z" fill="#E6E6E6" />
    <path d="M13 12L24 20V4L13 12Z" fill="#E6E6E6" />
    <path d="M1 21H23L12 13L1 21Z" fill="#E6E6E6" />
    <path d="M23 3H1L12 11L23 3Z" fill="#E6E6E6" />
    <path d="M14 5H10V7.666L12 9L14 7.666V5Z" fill="#CE2029" />
  </svg>
)

export default JEY

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/COD.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const COD: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 9L6.00003 21H2.39453L24 6.5965V9Z" fill="#FADC30" />
    <path d="M18 3H21.6055L0 17.4035V15L18 3Z" fill="#FADC30" />
    <path d="M1 3H18L0 15V4C0 3.4475 0.4475 3 1 3Z" fill="#3E74BA" />
    <path d="M23 21H6L24 9V20C24 20.5525 23.5525 21 23 21Z" fill="#3E74BA" />
    <path
      d="M2.3945 21H1C0.4475 21 0 20.5525 0 20V17.4035L21.6055 3H23C23.5525 3 24 3.4475 24 4V6.5965L2.3945 21Z"
      fill="#CC162C"
    />
    <path
      d="M6.128 5.3085H4.674L4.064 3.9845L3.453 5.3085H2L3.062 6.405L2.669 8L4.064 7.208L5.459 8L5.066 6.4055L6.128 5.3085Z"
      fill="#F6D031"
    />
  </svg>
)

export default COD

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/AZE.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const AZE: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#1799C1"
    />
    <path d="M24 9H0V15H24V9Z" fill="#DD0C39" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#19AD67"
    />
    <path
      d="M13 14C11.8955 14 11 13.1045 11 12C11 10.8955 11.8955 10 13 10C13.0825 10 13.161 10.0145 13.241 10.0245C12.692 9.4015 11.8965 9 11 9C9.3435 9 8 10.344 8 12C8 13.6565 9.3435 15 11 15C11.8965 15 12.692 14.5985 13.241 13.9755C13.161 13.9855 13.0825 14 13 14Z"
      fill="white"
    />
    <path
      d="M15.6785 11.3215L15.6175 11.8605L16 12.241L15.542 12.5295L15.482 13.0665L14.9705 12.8885L14.5125 13.177L14.3345 12.665L13.8235 12.4865L14.112 12.0295L13.9325 11.5185L14.47 11.457L14.7585 11L15.1405 11.383L15.6785 11.3215Z"
      fill="white"
    />
  </svg>
)

export default AZE

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SEN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SEN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3H8V21H16V3Z" fill="#EBCA19" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#DD2027"
    />
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#0D8643"
    />
    <path
      d="M15.1525 10.8615H12.932L12 8.842L11.0685 10.8615H8.84802L10.47 12.541L9.87052 14.9735L12.0005 13.7635L14.1305 14.9735L13.531 12.541L15.1525 10.8615Z"
      fill="#0D8643"
    />
  </svg>
)

export default SEN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MYS.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MYS: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 4C24 3.4475 23.5525 3 23 3H10V13H0V20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V4Z"
      fill="#E6E6E6"
    />
    <path d="M24 5H10V7H24V5Z" fill="#DA2728" />
    <path d="M24 9H10V11H24V9Z" fill="#DA2728" />
    <path d="M0 13V15H24V13H10H0Z" fill="#DA2728" />
    <path d="M24 17H0V19H24V17Z" fill="#DA2728" />
    <path d="M10 13H0V4C0 3.4475 0.4475 3 1 3H10V13Z" fill="#073AAA" />
    <path d="M8 7H6V9H8V7Z" fill="#FED02F" />
    <path
      d="M3.2 7.99999C3.2 6.88299 3.9665 5.95299 5 5.68449C4.8075 5.63449 4.6085 5.59949 4.4005 5.59949C3.074 5.59949 2 6.67499 2 7.99999C2 9.32499 3.074 10.4005 4.4005 10.4005C4.6085 10.4005 4.8075 10.3655 5 10.3155C3.967 10.047 3.2 9.11699 3.2 7.99999Z"
      fill="#FED02F"
    />
  </svg>
)

export default MYS

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/TUR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const TUR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#E40A18"
    />
    <path
      d="M11 17C8.2385 17 6 14.761 6 12C6 9.239 8.2385 7 11 7C11.628 7 12.2225 7.129 12.7765 7.3405C11.745 6.5035 10.4315 6 9 6C5.6865 6 3 8.6865 3 12C3 15.3135 5.6865 18 9 18C10.4315 18 11.745 17.4965 12.7765 16.6595C12.2225 16.871 11.628 17 11 17Z"
      fill="white"
    />
    <path
      d="M16.1566 11.012L15.2336 9.00999L14.3096 11.012H12.2061L13.7441 12.603L13.1551 14.9895L15.2331 13.809L17.3111 14.9895L16.7221 12.603L18.2601 11.012H16.1566Z"
      fill="white"
    />
  </svg>
)

export default TUR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/VNM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const VNM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#D82827"
    />
    <path
      d="M16.1805 10.5205H13.235L12 7.842L10.7635 10.5205H7.81897L9.97047 12.747L9.17547 15.9735L12 14.369L14.824 15.9735L14.029 12.747L16.1805 10.5205Z"
      fill="#FFFD38"
    />
  </svg>
)

export default VNM

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GNQ.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GNQ: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 9H7L1 3H23C23.5525 3 24 3.4475 24 4V9Z" fill="#439845" />
    <path d="M24 15H7L10 12L7 9H24V15Z" fill="#E6E6E6" />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H1L7 15H24V20Z" fill="#D1142A" />
    <path
      d="M1 3C0.4475 3 0 3.4475 0 4V12V20C0 20.5525 0.4475 21 1 21L10 12L1 3Z"
      fill="#23769E"
    />
    <path d="M17 10H13V12.666L15 14L17 12.666V10Z" fill="#44443C" />
  </svg>
)

export default GNQ

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GBR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GBR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M23 3H1C0.448 3 0 3.448 0 4V20C0 20.552 0.448 21 1 21H23C23.552 21 24 20.552 24 20V4C24 3.448 23.552 3 23 3Z"
      fill="#002781"
    />
    <path
      d="M24 4C24 3.448 23.552 3 23 3H20.4195L14 7.938V3H10V7.938L3.5805 3H1C0.448 3 0 3.448 0 4V5.293L6.1195 10H0V14H6.1195L0 18.7075V20C0 20.552 0.448 21 1 21H3.5805L10 16.062V21H14V16.062L20.4195 21H23C23.552 21 24 20.552 24 20V18.7075L17.8805 14H24V10H17.8805L24 5.293V4Z"
      fill="#E6E6E6"
    />
    <path d="M24 11H13V3H11V11H0V13H11V21H13V13H24V11Z" fill="#D10D24" />
    <path
      d="M23.5005 3.1535L14.6 10H16.24L24 4.031V4C24 3.634 23.7935 3.328 23.5005 3.1535Z"
      fill="#D10D24"
    />
    <path
      d="M16.24 14H14.6L23.5005 20.8465C23.7935 20.672 24 20.366 24 20V19.969L16.24 14Z"
      fill="#D10D24"
    />
    <path
      d="M7.76 14L0 19.969V20C0 20.366 0.2065 20.672 0.4995 20.8465L9.4 14H7.76Z"
      fill="#D10D24"
    />
    <path
      d="M7.76 10H9.4L0.4995 3.1535C0.2065 3.328 0 3.634 0 4V4.031L7.76 10Z"
      fill="#D10D24"
    />
  </svg>
)

export default GBR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/LKA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const LKA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M6 5H2V19H6V5Z" fill="#075641" />
    <path d="M10 5H6V19H10V5Z" fill="#FC5C1F" />
    <path
      d="M24 4C24 3.4475 23.5525 3 23 3H1C0.4475 3 0 3.4475 0 4V20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V4ZM2 5H10V19H2V5ZM22 19H12V5H22V19Z"
      fill="#D5AD3B"
    />
    <path d="M22 5H12V19H22V5Z" fill="#8B222B" />
    <path d="M14 6H13V7H14V6Z" fill="#D5AD3B" />
    <path d="M21 6H20V7H21V6Z" fill="#D5AD3B" />
    <path d="M14 17H13V18H14V17Z" fill="#D5AD3B" />
    <path d="M21 17H20V18H21V17Z" fill="#D5AD3B" />
    <path
      d="M20 10V11H16V10C16 9.4475 15.5525 9 15 9H14H13C13 9.5525 13.4475 10 14 10V11V12H13C13 12.5525 13.4475 13 14 13V14C14 14.5525 14.4475 15 15 15V14C15 13.4475 15.4475 13 16 13H19C19.5525 13 20 13.4475 20 14V15C20.5525 15 21 14.5525 21 14V13V11C21 10.4475 20.5525 10 20 10Z"
      fill="#D5AD3B"
    />
  </svg>
)

export default LKA

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/ECU.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const ECU: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 11H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V11Z"
      fill="#FFDD00"
    />
    <path d="M24 11H0V16H24V11Z" fill="#024FA7" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V16H24V20Z"
      fill="#F01A22"
    />
    <path d="M15 9H9V13L12 15L15 13V9Z" fill="#A67C52" />
  </svg>
)

export default ECU

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/UGA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const UGA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V18H24V20Z"
      fill="#D12325"
    />
    <path d="M24 15H0V18H24V15Z" fill="#F8D406" />
    <path d="M24 12H0V15H24V12Z" fill="#443A17" />
    <path d="M24 9H0V12H24V9Z" fill="#D12325" />
    <path
      d="M0 6H24V4C24 3.4475 23.5525 3 23 3H1C0.4475 3 0 3.4475 0 4V6Z"
      fill="#443A17"
    />
    <path d="M24 6H0V9H24V6Z" fill="#F8D406" />
    <path
      d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
      fill="white"
    />
    <path
      d="M13 11H11V10H12V9L10 10V11V12C10 12.5525 10.4475 13 11 13V15L12 13L13 15V13H14V12C14 11.4475 13.5525 11 13 11Z"
      fill="#9BA099"
    />
  </svg>
)

export default UGA

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/NGA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const NGA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3H8V21H16V3Z" fill="#E6E6E6" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#078754"
    />
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#078754"
    />
  </svg>
)

export default NGA

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/DEU.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const DEU: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="black"
    />
    <path d="M24 9H0V15H24V9Z" fill="#EE0000" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#FDCF00"
    />
  </svg>
)

export default DEU

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SGP.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SGP: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#E6E6E6"
    />
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#EA2C3F"
    />
    <path
      d="M4 8C4 6.6965 4.8375 5.5975 6 5.1835C5.6855 5.0725 5.3525 5 5 5C3.3435 5 2 6.344 2 8C2 9.6565 3.3435 11 5 11C5.3525 11 5.6855 10.9275 6 10.8165C4.8375 10.4025 4 9.3035 4 8Z"
      fill="white"
    />
    <path
      d="M9.5 6C9.77614 6 10 5.77614 10 5.5C10 5.22386 9.77614 5 9.5 5C9.22386 5 9 5.22386 9 5.5C9 5.77614 9.22386 6 9.5 6Z"
      fill="white"
    />
    <path
      d="M9.5 10C9.77614 10 10 9.77614 10 9.5C10 9.22386 9.77614 9 9.5 9C9.22386 9 9 9.22386 9 9.5C9 9.77614 9.22386 10 9.5 10Z"
      fill="white"
    />
    <path
      d="M7.5 9.001C7.77614 9.001 8 8.77692 8 8.5005C8 8.22408 7.77614 8 7.5 8C7.22386 8 7 8.22408 7 8.5005C7 8.77692 7.22386 9.001 7.5 9.001Z"
      fill="white"
    />
    <path
      d="M11.5 7.0005C11.7761 7.0005 12 6.77642 12 6.5C12 6.22358 11.7761 5.9995 11.5 5.9995C11.2239 5.9995 11 6.22358 11 6.5C11 6.77642 11.2239 7.0005 11.5 7.0005Z"
      fill="white"
    />
    <path
      d="M11.4995 9C11.7762 9 12.0005 8.77614 12.0005 8.5C12.0005 8.22386 11.7762 8 11.4995 8C11.2228 8 10.9985 8.22386 10.9985 8.5C10.9985 8.77614 11.2228 9 11.4995 9Z"
      fill="white"
    />
    <path
      d="M7.50001 7.00101C7.77643 7.00101 8.00051 6.77715 8.00051 6.50101C8.00051 6.22486 7.77643 6.00101 7.50001 6.00101C7.22359 6.00101 6.99951 6.22486 6.99951 6.50101C6.99951 6.77715 7.22359 7.00101 7.50001 7.00101Z"
      fill="white"
    />
  </svg>
)

export default SGP

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/FSM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const FSM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#73B1DF"
    />
    <path
      d="M14.0919 7.2725H12.6184L11.9999 5.9295L11.3809 7.2725H9.90845L10.9844 8.38301L10.5859 10L11.9999 9.19751L13.4139 10L13.0154 8.38301L14.0919 7.2725Z"
      fill="#F6D031"
    />
    <path
      d="M14.0919 15.2725H12.6184L11.9999 13.9295L11.3809 15.2725H9.90845L10.9844 16.383L10.5859 18L11.9999 17.1975L13.4139 18L13.0154 16.383L14.0919 15.2725Z"
      fill="#F6D031"
    />
    <path
      d="M9.1835 11.343H7.71L7.092 10L6.473 11.343H5L6.076 12.4535L5.6775 14.0705L7.0915 13.268L8.5055 14.0705L8.107 12.4535L9.1835 11.343Z"
      fill="#F6D031"
    />
    <path
      d="M19.1835 11.343H17.71L17.092 10L16.473 11.343H15L16.076 12.4535L15.6775 14.0705L17.0915 13.268L18.5055 14.0705L18.107 12.4535L19.1835 11.343Z"
      fill="#F6D031"
    />
  </svg>
)

export default FSM

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/COG.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const COG: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M1 3H20L0 16V4C0 3.4475 0.4475 3 1 3Z" fill="#059746" />
    <path d="M23 21H6L24 9V20C24 20.5525 23.5525 21 23 21Z" fill="#DD2525" />
    <path
      d="M6 21H1C0.4475 21 0 20.5525 0 20V16L20 3H23C23.5525 3 24 3.4475 24 4V9L6 21Z"
      fill="#FBDE45"
    />
  </svg>
)

export default COG

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/DJI.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const DJI: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1L11 12H24V20Z"
      fill="#15AB48"
    />
    <path d="M24 12H11L1 3H23C23.5525 3 24 3.4475 24 4V12Z" fill="#6FB2DC" />
    <path
      d="M1 3C0.4475 3 0 3.4475 0 4V12V20C0 20.5525 0.4475 21 1 21L11 12L1 3Z"
      fill="#E6E6E6"
    />
    <path
      d="M7.1845 11.2715H5.711L5.092 9.9295L4.474 11.2715H3L4.076 12.385L3.6785 14L5.0915 13.1975L6.506 14L6.1075 12.385L7.1845 11.2715Z"
      fill="#D21F22"
    />
  </svg>
)

export default DJI

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/TON.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const TON: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M10 13H0V4C0 3.4475 0.4475 3 1 3H10V13Z" fill="#E6E6E6" />
    <path
      d="M23 3H10V13H0V20C0 20.5525 0.448 21 1 21H23C23.552 21 24 20.5525 24 20V12V4C24 3.4475 23.552 3 23 3Z"
      fill="#FC0204"
    />
    <path d="M8 7H6V5H4V7H2V9H4V11H6V9H8V7Z" fill="#FC0204" />
  </svg>
)

export default TON

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MCO.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MCO: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#CE1127"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#E6E6E6"
    />
  </svg>
)

export default MCO

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SRB.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SRB: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#DD2026"
    />
    <path d="M24 9H0V15H24V9Z" fill="#233E85" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#E6E6E6"
    />
    <path d="M9 9H3V15L6 17L9 15V9Z" fill="#EE1E2E" />
    <path d="M8 10H4V13H8V10Z" fill="white" />
    <path d="M6 16L8 14H4L6 16Z" fill="white" />
    <path d="M4 7V8H5V9H7V8H8V7H4Z" fill="#F5E303" />
  </svg>
)

export default SRB

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GTM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GTM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3H8V21H16V3Z" fill="#E6E6E6" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#4897D0"
    />
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#4897D0"
    />
    <path
      d="M12 9C10.344 9 9 10.344 9 12C9 13.6565 10.344 15 12 15C13.6565 15 15 13.6565 15 12C15 10.344 13.6565 9 12 9ZM12 14C10.8955 14 10 13.1045 10 12C10 10.8955 10.8955 10 12 10C13.1045 10 14 10.8955 14 12C14 13.1045 13.1045 14 12 14Z"
      fill="#738356"
    />
  </svg>
)

export default GTM

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/NPL.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const NPL: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#E6E6E6"
    />
    <path
      d="M6 11H14L4 3H1C0.448 3 0 3.4475 0 4V10V20C0 20.5525 0.448 21 1 21H15L6 11Z"
      fill="#DA1A40"
    />
    <path
      d="M6.30755 14.997L5.70005 16.1825L7.00005 16.4795L5.77155 16.998L6.57605 18.0595L5.30205 17.668L5.23505 19L4.51205 17.88L3.60455 18.8565L3.77005 17.534L2.44755 17.699L3.42505 16.792L2.30505 16.0685L3.63605 16.002L3.24355 14.7275L4.30605 15.532L4.82455 14.3045L5.12155 15.6035L6.30755 14.997Z"
      fill="white"
    />
    <path
      d="M4.5 8.5C5.05228 8.5 5.5 8.05229 5.5 7.5C5.5 6.94772 5.05228 6.5 4.5 6.5C3.94772 6.5 3.5 6.94772 3.5 7.5C3.5 8.05229 3.94772 8.5 4.5 8.5Z"
      fill="white"
    />
    <path
      d="M4.5 10C3.1215 10 2 8.879 2 7.5H3C3 8.327 3.673 9 4.5 9C5.327 9 6 8.327 6 7.5H7C7 8.879 5.8785 10 4.5 10Z"
      fill="white"
    />
  </svg>
)

export default NPL

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/USA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const USA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 4C24 3.4475 23.5525 3 23 3H10V13H0V20C0 20.5525 0.4475 21 1 21H23C23.5525 21 24 20.5525 24 20V4Z"
      fill="#B41F30"
    />
    <path d="M24 5H10V7H24V5Z" fill="#E6E6E6" />
    <path d="M24 9H10V11H24V9Z" fill="#E6E6E6" />
    <path d="M0 13V15H24V13H10H0Z" fill="#E6E6E6" />
    <path d="M24 17H0V19H24V17Z" fill="#E6E6E6" />
    <path d="M10 13H0V4C0 3.4475 0.4475 3 1 3H10V13Z" fill="#00256A" />
    <path
      d="M5.00002 6.961L4.68352 7.645H3.93152L4.48152 8.215L4.27852 9.039L5.00002 8.63L5.72152 9.039L5.51852 8.215L6.06852 7.645H5.31552L5.00002 6.961Z"
      fill="white"
    />
    <path
      d="M2.55347 4.5145L2.23747 5.1985H1.48547L2.03497 5.7685L1.83197 6.5925L2.55347 6.1835L3.27547 6.5925L3.07197 5.7685L3.62197 5.1985H2.86897L2.55347 4.5145Z"
      fill="white"
    />
    <path
      d="M7.44643 4.5145L7.76243 5.1985H8.51443L7.96493 5.7685L8.16793 6.5925L7.44643 6.1835L6.72443 6.5925L6.92793 5.7685L6.37793 5.1985H7.13093L7.44643 4.5145Z"
      fill="white"
    />
    <path
      d="M2.55347 11.4855L2.23747 10.8015H1.48547L2.03497 10.2315L1.83197 9.4075L2.55347 9.8165L3.27547 9.4075L3.07197 10.2315L3.62197 10.8015H2.86897L2.55347 11.4855Z"
      fill="white"
    />
    <path
      d="M7.44643 11.4855L7.76243 10.8015H8.51443L7.96493 10.2315L8.16793 9.4075L7.44643 9.8165L6.72443 9.4075L6.92793 10.2315L6.37793 10.8015H7.13093L7.44643 11.4855Z"
      fill="white"
    />
  </svg>
)

export default USA

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/GNB.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GNB: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8 3H1C0.4475 3 0 3.4475 0 4V20C0 20.5525 0.4475 21 1 21H8V3Z"
      fill="#CB2322"
    />
    <path d="M24 12H8V3H23C23.5525 3 24 3.4475 24 4V12Z" fill="#F8CC15" />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H8V12H24V20Z" fill="#078754" />
    <path
      d="M6.09196 11.2715H4.61896L3.99996 9.9295L3.38096 11.2715H1.90796L2.98396 12.385L2.58596 14L3.99996 13.1975L5.41396 14L5.01546 12.385L6.09196 11.2715Z"
      fill="#000105"
    />
  </svg>
)

export default GNB

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/AND.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const AND: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 3H8V21H16V3Z" fill="#F5E303" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H16V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#EE1E2E"
    />
    <path
      d="M8 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H8V21Z"
      fill="#2B3384"
    />
    <path d="M15 9H9V13L12 15L15 13V9Z" fill="#EE1E2E" />
  </svg>
)

export default AND

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/TUV.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const TUV: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M23 3H1C0.734784 3 0.48043 3.10536 0.292893 3.29289C0.105357 3.48043 0 3.73478 0 4L0 20C0 20.2652 0.105357 20.5196 0.292893 20.7071C0.48043 20.8946 0.734784 21 1 21H23C23.2652 21 23.5196 20.8946 23.7071 20.7071C23.8946 20.5196 24 20.2652 24 20V4C24 3.73478 23.8946 3.48043 23.7071 3.29289C23.5196 3.10536 23.2652 3 23 3Z"
        fill="#4BA7E3"
      />
      <path
        d="M1 3H12V12H0V4C0 3.73478 0.105357 3.48043 0.292893 3.29289C0.48043 3.10536 0.734784 3 1 3Z"
        fill="#00017A"
      />
      <path d="M9.5 9.5H8V9.625L11.1665 12H12V11.375L9.5 9.5Z" fill="#FF0000" />
      <path
        d="M0.0599365 3.67L2.49994 5.5H3.99994V5.375L0.852936 3.015C0.673651 3.04164 0.505041 3.11672 0.365293 3.23215C0.225546 3.34758 0.119964 3.49897 0.0599365 3.67Z"
        fill="#FF0000"
      />
      <path d="M12 3H11.167L8 5.375V5.5H9.5005L12 3.625V3Z" fill="#FF0000" />
      <path d="M0 11.375V12H0.8335L4 9.625V9.5H2.5L0 11.375Z" fill="#FF0000" />
      <path d="M12 6.5H7V3H5V6.5H0V8.5H5V12H7V8.5H12V6.5Z" fill="#FF0000" />
      <path
        d="M17.009 10.672H16.166L15.812 9.9035L15.458 10.672H14.6155L15.231 11.307L15.0035 12.232L15.812 11.773L16.6205 12.232L16.393 11.307L17.009 10.672Z"
        fill="#F6D031"
      />
      <path
        d="M19.9999 8.7685H19.1569L18.8029 8L18.4499 8.7685H17.6064L18.2219 9.4035L17.9944 10.3285L18.8029 9.8695L19.6114 10.3285L19.3839 9.4035L19.9999 8.7685Z"
        fill="#F6D031"
      />
      <path
        d="M22.509 6.015H21.666L21.312 5.2465L20.958 6.015H20.1155L20.731 6.65L20.5035 7.575L21.312 7.116L22.1205 7.575L21.893 6.65L22.509 6.015Z"
        fill="#F6D031"
      />
      <path
        d="M16.4999 17.4255H15.6569L15.3029 16.657L14.9499 17.4255H14.1064L14.7219 18.0605L14.4944 18.9855L15.3029 18.5265L16.1114 18.9855L15.8839 18.0605L16.4999 17.4255Z"
        fill="#F6D031"
      />
      <path
        d="M19.491 15.522H18.65L18.296 14.7535L17.942 15.522H17.1L17.7155 16.157L17.488 17.082L18.2965 16.623L19.105 17.082L18.8775 16.157L19.491 15.522Z"
        fill="#F6D031"
      />
      <path
        d="M21.9999 12.7685H21.1569L20.8029 12L20.4499 12.7685H19.6064L20.2219 13.4035L19.9944 14.3285L20.8029 13.8695L21.6114 14.3285L21.3839 13.4035L21.9999 12.7685Z"
        fill="#F6D031"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default TUV

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MOZ.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MOZ: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#FBE201"
    />
    <path d="M24 9H0V15H24V9Z" fill="#424041" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#0F736B"
    />
    <path d="M24 14H0V15H24V14Z" fill="white" />
    <path d="M24 9H0V10H24V9Z" fill="white" />
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L11 12L1 3Z"
      fill="#E52635"
    />
    <path
      d="M7.1845 11.2715H5.7105L5.0925 9.9295L4.474 11.2715H3L4.0765 12.385L3.6785 14L5.092 13.1975L6.506 14L6.108 12.385L7.1845 11.2715Z"
      fill="#FFCE19"
    />
  </svg>
)

export default MOZ

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/SDN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SDN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L10 12L1 3Z"
      fill="#0EA651"
    />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H1L7 15H24V20Z" fill="#2D2D2D" />
    <path d="M24 15H7L10 12L7 9H24V15Z" fill="#E6E6E6" />
    <path d="M24 9H7L1 3H23C23.5525 3 24 3.4475 24 4V9Z" fill="#D81D38" />
  </svg>
)

export default SDN

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/VUT.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const VUT: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M10 11L0 5V7L8 12L0 17V19L10 13H24V11H10Z" fill="#F8C90A" />
    <path d="M0 7V9V15V17L8 12L0 7Z" fill="black" />
    <path
      d="M1 3C0.4475 3 0 3.4475 0 4V5L10 11H24V5V4C24 3.4475 23.5525 3 23 3H1Z"
      fill="#F80000"
    />
    <path
      d="M1 21C0.4475 21 0 20.5525 0 20V19L10 13H24V19V20C24 20.5525 23.5525 21 23 21H1Z"
      fill="#088537"
    />
    <path
      d="M3 11C2.448 11 2 11.448 2 12C2 12.552 2.448 13 3 13C3.552 13 4 12.552 4 12C4 11.448 3.552 11 3 11ZM3 12.5C2.7235 12.5 2.5 12.2765 2.5 12C2.5 11.7235 2.7235 11.5 3 11.5C3.2765 11.5 3.5 11.7235 3.5 12C3.5 12.2765 3.2765 12.5 3 12.5Z"
      fill="#F8C90A"
    />
  </svg>
)

export default VUT

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/HRV.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const HRV: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M24 9H0V4C0 3.45 0.45 3 1 3H23C23.55 3 24 3.45 24 4V9Z"
        fill="#FF0000"
      />
      <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
      <path
        d="M24 20C24 20.55 23.55 21 23 21H1C0.45 21 0 20.55 0 20V15H24V20Z"
        fill="#171796"
      />
      <path
        d="M12 16.5C10.05 16.5 8.5 14.95 8.5 13V8.5H15.5V13C15.5 14.95 13.95 16.5 12 16.5Z"
        fill="white"
      />
      <path
        d="M12 16C10.35 16 9 14.65 9 13V9H15V13C15 14.65 13.65 16 12 16Z"
        fill="#FF0000"
      />
      <path d="M11 10H10V11H11V10Z" fill="#E6E6E6" />
      <path d="M12 11H11V12H12V11Z" fill="#E6E6E6" />
      <path d="M11 12H10V13H11V12Z" fill="#E6E6E6" />
      <path d="M10 11H9V12H10V11Z" fill="#E6E6E6" />
      <path d="M12 9H11V10H12V9Z" fill="#E6E6E6" />
      <path d="M10 9H9V10H10V9Z" fill="#E6E6E6" />
      <path d="M13 10H12V11H13V10Z" fill="#E6E6E6" />
      <path d="M14 9H13V10H14V9Z" fill="#E6E6E6" />
      <path d="M15 10H14V11H15V10Z" fill="#E6E6E6" />
      <path d="M14 11H13V12H14V11Z" fill="#E6E6E6" />
      <path d="M15 12H14V13H15V12Z" fill="#E6E6E6" />
      <path d="M13 12H12V13H13V12Z" fill="#E6E6E6" />
      <path d="M12 13H11V14H12V13Z" fill="#E6E6E6" />
      <path d="M11 15V15.85C11.3 15.95 11.65 16 12 16V15H11Z" fill="#E6E6E6" />
      <path d="M11 14H10V15H11V14Z" fill="#E6E6E6" />
      <path d="M10 14V13H9C9 13.35 9.05 13.7 9.15 14H10Z" fill="#E6E6E6" />
      <path
        d="M10 15.25V15H9.75C9.85 15.1 9.9 15.15 10 15.25Z"
        fill="#E6E6E6"
      />
      <path d="M14 13H13V14H14V13Z" fill="#E6E6E6" />
      <path
        d="M13 15.85C13.35 15.7 13.7 15.5 14 15.25V15H13V15.85Z"
        fill="#E6E6E6"
      />
      <path
        d="M14.85 14H14V15H14.25C14.5 14.7 14.7 14.35 14.85 14Z"
        fill="#E6E6E6"
      />
      <path d="M13 14H12V15H13V14Z" fill="#E6E6E6" />
      <path
        d="M8.90005 9.35L8.05005 7.4L8.75005 6.3L9.70005 6.65L10.35 5.9L11.25 6.4L12.05 5.75L12.85 6.4L13.75 5.9L14.4 6.65L15.35 6.3L16.05 7.4L15.2 9.35L14.95 9.25C14.6 9.1 14.2 8.95 13.85 8.85C13.45 8.75 13.1 8.7 12.7 8.65C12.3 8.6 11.9 8.6 11.5 8.65C11.1 8.7 10.7 8.75 10.35 8.85C9.95005 8.95 9.60005 9.1 9.25005 9.25L8.90005 9.35ZM8.60005 7.45L9.15005 8.7C9.45005 8.55 9.80005 8.45 10.1 8.4C10.5 8.3 10.95 8.25 11.35 8.2C11.75 8.15 12.2 8.15 12.6 8.2C13 8.25 13.45 8.3 13.85 8.4C14.2 8.5 14.5 8.6 14.8 8.7L15.35 7.45L15 6.9L14.1 7.25L13.55 6.5L12.75 7L12 6.4L11.25 7L10.45 6.5L9.85005 7.2L8.95005 6.85L8.60005 7.45Z"
        fill="white"
      />
      <path
        d="M9.74997 6.94998L8.84998 6.59998L8.34998 7.44998L8.54998 7.89998L9.04998 9.04997C9.39997 8.89997 9.79997 8.74997 10.2 8.64997L9.74997 6.94998Z"
        fill="#0093DD"
      />
      <path
        d="M11.25 6.69995L10.4 6.19995L9.75 6.94995L10.15 8.59995C10.55 8.49995 10.95 8.44995 11.35 8.39995L11.25 6.69995Z"
        fill="#171796"
      />
      <path
        d="M12.75 6.69999L12 6.04999L11.25 6.64999L11.4 8.34999C11.6 8.34999 11.8 8.29999 12 8.29999C12.2 8.29999 12.4 8.29999 12.6 8.34999L12.75 6.69999Z"
        fill="#0093DD"
      />
      <path
        d="M14.25 6.94995L13.6 6.19995L12.75 6.69995L12.6 8.39995C13 8.44995 13.4 8.49995 13.8 8.59995L14.25 6.94995Z"
        fill="#171796"
      />
      <path
        d="M15 9.00005L15.7 7.40005L15.2 6.55005L14.3 6.90005L13.9 8.55005C14.25 8.70005 14.6 8.85005 15 9.00005Z"
        fill="#0093DD"
      />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default HRV

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MLT.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MLT: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H12V3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#D90E2B"
    />
    <path
      d="M12 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H12V21Z"
      fill="#E6E6E6"
    />
    <path d="M5 5H3V9H5V5Z" fill="#B3B3B3" />
    <path d="M6 6H2V8H6V6Z" fill="#B3B3B3" />
  </svg>
)

export default MLT

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/MWI.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MWI: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#08703B"
    />
    <path d="M24 9H0V15H24V9Z" fill="#D22129" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#353334"
    />
    <path
      d="M12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14Z"
      fill="#D22129"
    />
  </svg>
)

export default MWI

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/UKR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const UKR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#3A75C3"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#F9DD17"
    />
  </svg>
)

export default UKR

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of country-flags/react/icons/BHS.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const BHS: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 9H7L1 3H23C23.5525 3 24 3.4475 24 4V9Z" fill="#00A6D3" />
    <path d="M24 15H7L10 12L7 9H24V15Z" fill="#F6E04E" />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H1L7 15H24V20Z" fill="#00A6D3" />
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L10 12L1 3Z"
      fill="black"
    />
  </svg>
)

export default BHS

```