Registry / crm-productivity / platformicons

platformicons

library9.3.0jsnpmunverified

Platformicons provides a comprehensive set of web platform and framework logos, designed and maintained by the team behind Sentry.io. This library offers icons as both a React component (`PlatformIcon`) and raw SVG files, catering to various project setups. The current stable version is 9.3.0, with a release cadence that includes regular updates for new features (like adding new framework icons) and bug fixes. Key differentiators include its dual support for modern ESM and CommonJS module systems, a flexible React component with props for sizing, formatting ('sm' for compact, 'lg' for detailed), border radius, and optional language badges. It also includes a `preloadIcons` utility to prevent render jank and exposes a `platforms` array for runtime access to supported keys. Icons follow a consistent `language-framework` naming convention with intelligent fallbacks. For non-React users, direct access to organized SVG files is provided. The package is actively maintained, receiving frequent updates to expand its icon set and address issues.

crm-productivity

npm install platformicons

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PLATFORMICONS

platformicons

crm-productivityjavascriptv9.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PlatformIcon

✓ import { PlatformIcon } from 'platformicons';

✗ import PlatformIcon from 'platformicons'; // OR const PlatformIcon = require('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

✓ import { platforms } from 'platformicons';

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

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

✓ import { preloadIcons } from 'platformicons';

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

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.

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>);

Debug

Known issues

gotchaReact 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

affects: >=1.0.0

gotchaPlatform 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);`

affects: >=1.0.0

gotchaThe `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`.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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)

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)

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';`

Upgrade

Version history

9.3.0latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for using the PlatformIcon React component.

Agent activity

33 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/getsentry/platformicons ↗

packagehttps://www.npmjs.com/package/platformicons ↗

homepagehttps://sentry.io ↗