Platformicons

Common errors

• Module not found: Can't resolve 'platformicons' in ...

  cause The 'platformicons' package is not installed, or there's a typo in the import path, or your bundler's configuration is not correctly resolving modules from node_modules.
  fix Run `npm install platformicons` or `yarn add platformicons`. Double-check the import statement for typos: `import { PlatformIcon } from 'platformicons';`

• TypeError: (0 , platformicons__WEBPACK_IMPORTED_MODULE_0__.PlatformIcon) is not a function (or similar 'PlatformIcon is not defined' error)

  cause This usually occurs when attempting to import `PlatformIcon` as a default export (e.g., `import PlatformIcon from 'platformicons'`) or using an incorrect CommonJS `require` pattern, while `PlatformIcon` is exclusively a named export.
  fix Ensure you are using a named import: `import { PlatformIcon } from 'platformicons';`. For CommonJS environments, use `const { PlatformIcon } = require('platformicons');`

• Uncaught ReferenceError: React is not defined (when using PlatformIcon component)

  cause The `PlatformIcon` component is a React component and requires React to be available in the scope. This error indicates that React is either not installed or not correctly imported/made available where PlatformIcon is being used.
  fix Install `react` and `react-dom` (`npm install react react-dom`) and ensure React is imported in your component files: `import React from 'react';`

Warnings

• gotcha React is a mandatory peer dependency for using the PlatformIcon component. Ensure 'react' and 'react-dom' are installed in your project alongside 'platformicons' to avoid runtime errors.
  Fix: npm install react react-dom --save
• gotcha Platform identifiers follow a 'language-framework' naming convention (e.g., 'javascript-react', 'python-django'). Supplying an incorrect or unsupported string for the `platform` prop will result in the library falling back to a generic language icon, then a default icon, which may not be what you expect.
  Fix: Consult the `platforms` export for a complete list of valid keys: `import { platforms } from 'platformicons'; console.log(platforms);`
• gotcha The `node-*` platform identifiers are treated as aliases for `javascript-*` for backwards compatibility. For new implementations, it is recommended to consistently use `javascript-*` for clarity and future-proofing.
  Fix: When referring to Node.js-based frameworks, use `javascript-framework` (e.g., `javascript-express`) instead of `node-express`.
• gotcha The `format` prop (`'sm'` or `'lg'`) determines the icon's visual style and resolution. `'sm'` uses compact icons optimized for small sizes from `/svg/`, while `'lg'` uses more detailed 80x80px icons from `/svg_80x80/`. Mixing these without understanding their distinctions can lead to visual inconsistencies or unexpected icon styles.
  Fix: Explicitly set `format` to `'sm'` or `'lg'` based on your design requirements. Be aware of the underlying SVG directories if accessing raw files directly.

Install

• npm install platformicons npm
• yarn add platformicons yarn
• pnpm add platformicons pnpm

Imports

• PlatformIcon
  wrong:

  import PlatformIcon from 'platformicons';
  // OR
  const PlatformIcon = require('platformicons');

  correct:

  import { PlatformIcon } from 'platformicons';

  PlatformIcon is a named export. Default imports or incorrect CommonJS require patterns will fail. The package ships both CJS and ESM, but ESM imports are recommended.
• platforms
  wrong:

  const platforms = require('platformicons').platforms;

  correct:

  import { platforms } from 'platformicons';

  This named export provides a string array of all supported platform keys at runtime. Incorrectly accessing it via CommonJS can lead to undefined values.
• preloadIcons
  wrong:

  import * as PlatformIcons from 'platformicons'; PlatformIcons.preloadIcons();

  correct:

  import { preloadIcons } from 'platformicons';

  A named export function used to dynamically insert <link rel="preload"> tags for icons, improving perceived performance. Use direct named import for optimal tree-shaking.

Quickstart

Demonstrates installation, preloading icons, and rendering multiple PlatformIcon components with various props for customization.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PlatformIcon, preloadIcons } from 'platformicons';

// Preload all icons to avoid render jank on initial load
preloadIcons('sm');

function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h1>Platform Icons Demo</h1>
      <p>Render a React icon with custom size and radius:</p>
      <PlatformIcon platform="javascript-react" size={48} radius={8} />
      <p>Render a Python Django icon with a language badge:</p>
      <PlatformIcon platform="python-django" size={40} withLanguageIcon={true} languageIconStyles={{ borderRadius: '2px' }} />
      <p>Render a Go Echo icon in 'lg' format:</p>
      <PlatformIcon platform="go-echo" size={60} format="lg" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));
root.render(<React.StrictMode><App /></React.StrictMode>);