React

@geoicons/react ships every icon as its own tree-shakeable component. Install it, import by category, and style with props. The full prop contract lives on the API overview. It's the same in every framework.

Install

npm install @geoicons/react

Import

import { Jp } from '@geoicons/react/countries'; // country
import { Africa } from '@geoicons/react/areas'; // area

Examples

// Default outline
<Jp />

// Larger, bolder, colored
<Jp size={64} strokeWidth={1.75} stroke="currentColor" />

// Filled
<Jp fill="currentColor" />

// Meaningful (announced by screen readers)
<Jp aria-label="Japan" />

Any other native SVG attribute (className, style, onClick, data-*) is forwarded to the underlying <svg>.

There is no variant prop. Weight and fill are continuous. Drive them with strokeWidth and fill directly. See Styling.

License

If you're using GeoIcons with a commercial product, wrap your app in <IconProvider> to activate your license. It verifies your commercial license key and waives the GPLv3 licensing requirements, allowing you to use GeoIcons in proprietary applications under the terms of your commercial license.

import { IconProvider } from '@geoicons/react';

export default function App() {
  return (
    <IconProvider licenseKey={process.env.NEXT_PUBLIC_GEOICONS_KEY}>
      <YourApp />
    </IconProvider>
  );
}

Read the current status anywhere with the useGeoiconsLicense() hook. See Licensing for more details.