Styling

Named import flags and DynamicFlag accept standard SVG props, making them easy to style with any CSS approach.

Styling methods

Tailwind CSS

Use utility classes for rapid styling with design consistency.

Inline Styles

Perfect for dynamic styles or one-off customizations.

CSS Modules

Scoped styles with traditional CSS syntax and no naming conflicts.

Styled Components

CSS-in-JS solution with full theme integration.

Examples

import { FlagUs } from '@sankyu/react-circle-flags'

export default function TailwindFlag() {
  return (
    <FlagUs className="w-12 h-12 rounded-full shadow-lg hover:scale-110 transition-transform" />
  )
}

import { FlagUs } from '@sankyu/react-circle-flags'

export default function InlineFlag() {
  return (
    <FlagUs
      style={{
        width: 48,
        height: 48,
        borderRadius: '50%',
        boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
      }}
    />
  )
}

import { FlagUs } from '@sankyu/react-circle-flags'
import styles from './flags.module.css'

export default function CssModuleFlag() {
  return <FlagUs className={styles.flag} />
}

.flag {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.flag:hover {
  transform: scale(1.1);
}

import styled from 'styled-components'
import { FlagUs } from '@sankyu/react-circle-flags'

const StyledFlag = styled(FlagUs)`
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.1);
  }
`

export default function StyledFlag() {
  return <StyledFlag />
}

<script setup lang="ts">
import { FlagUs } from '@sankyu/vue-circle-flags'
</script>

<template>
  <!-- Using class -->
  <FlagUs class="w-12 h-12 rounded-full shadow-lg hover:scale-110 transition-transform" />

  <!-- Using inline styles -->
  <FlagUs :style="{ width: '48px', height: '48px', borderRadius: '50%' }" />

  <!-- With scoped styles -->
  <FlagUs class="flag" />
</template>

<style scoped>
.flag {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.flag:hover {
  transform: scale(1.1);
}
</style>

Solid (beta): use className for named-import flags.

import { FlagUs } from '@sankyu/solid-circle-flags'

export default function SolidFlag() {
  return (
    <FlagUs
      width={48}
      height={48}
      className="w-12 h-12 rounded-full shadow-lg hover:scale-110 transition-transform"
      style={{ filter: 'grayscale(100%)' }}
      aria-label="United States flag"
    />
  )
}

Common customizations

All flags support standard SVG properties:

import { FlagJp } from '@sankyu/react-circle-flags'

export default function CustomFlag() {
  return (
    <FlagJp
      width={64}
      height={64}
      className="my-flag"
      style={{ opacity: 0.8 }}
      onClick={() => console.log('Flag clicked!')}
      aria-label="Japan flag"
    />
  )
}

<script setup lang="ts">
import { FlagJp } from '@sankyu/vue-circle-flags'
</script>

<template>
  <FlagJp
    :width="64"
    :height="64"
    class="my-flag"
    :style="{ opacity: 0.8 }"
    aria-label="Japan flag"
    @click="console.log('Flag clicked!')"
  />
</template>

import { FlagJp } from '@sankyu/solid-circle-flags'

export default function CustomFlag() {
  return (
    <FlagJp
      width={64}
      height={64}
      className="my-flag"
      style={{ opacity: 0.8 }}
      onClick={() => console.log('Flag clicked!')}
      aria-label="Japan flag"
    />
  )
}

Next step

Dynamic Flags Learn how to render flags based on runtime country codes