Styling

Flag components accept all 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 />
}

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"
    />
  )
}

Next step

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