devicon-mithril

Devicon SVG icons as Mithril.js components. Based on the same build approach as lucide-mithril.

Install

bun add devicon-mithril
# or
npm install devicon-mithril

Usage

Each component corresponds to a devicon name + variant, prefixed with Dev and converted to PascalCase.

import m from 'mithril'
import { DevJavascriptOriginal, DevReactOriginal, DevVuejsOriginal } from 'devicon-mithril'

// Basic usage — renders at the default 128×128 size
m(DevJavascriptOriginal)

// Custom size (icons are square)
m(DevReactOriginal, { size: 64 })

// Any additional SVG attributes are passed through
m(DevVuejsOriginal, { size: 48, class: 'my-icon' })

Component naming

| Devicon name | Component name | |-------------------------------|-----------------------------------| | javascript-original | DevJavascriptOriginal | | javascript-plain | DevJavascriptPlain | | react-original | DevReactOriginal | | react-original-wordmark | DevReactOriginalWordmark | | vuejs-original | DevVuejsOriginal | | adonisjs-original-wordmark | DevAdonisjsOriginalWordmark |

All 1877 icons from devicon are available (578 technologies × multiple variants).

Variants

| Variant | Description | |---------------------|--------------------------------------| | original | Full-color original icon | | plain | Simplified/monochrome version | | line | Line/outline version | | original-wordmark | Original icon with technology name | | plain-wordmark | Plain icon with technology name | | line-wordmark | Line icon with technology name |

mithril-lynx (Lynx)

mithril-lynx does not support m.trust. On Lynx, SVG must follow the native <svg> contract: content is a full <svg>...</svg> document string, and display size is set on the outer element via a style object ({ width: "Npx", height: "Npx" }), not CSS text strings.

Use the parallel icons-lynx/ components (built with lynxIcon in lynx_svg.js):

import m from 'mithril-runtime'
import DevJavascriptOriginal from 'devicon-mithril/icons-lynx/DevJavascriptOriginal.js'

const MyComponent = {
  view: () => m('view', [
    m(DevJavascriptOriginal, { size: 48 }),
  ]),
}

The web entry (devicon-mithril / icons/*) is unchanged and still uses m.trust.

mithril-runtime is an optional peer dependency: install it when you use icons-lynx/*.

Build

To regenerate the components from the latest version of devicon:

bun run build

The build script reads SVGs directly from the devicon npm package (node_modules/devicon/icons/), so no manual cloning is needed.

This will:

1. Read all SVGs from node_modules/devicon/icons/
2. Generate one component file per icon under icons/ (web, m.trust)
3. Generate parallel components under icons-lynx/ (mithril-lynx, full SVG in content + size via style)
4. Write the index.js entry point and index.d.ts TypeScript declarations

Project structure

devicon-mithril/
├── build/
│   └── build.js          # Build script
├── icons/                # Generated web icon components (1877 files)
│   ├── DevJavascriptOriginal.js
│   ├── DevReactOriginal.js
│   └── ...
├── icons-lynx/           # Generated mithril-lynx icon components
│   ├── DevJavascriptOriginal.js
│   ├── DevReactOriginal.js
│   └── ...
├── test/
│   └── index.html        # Usage example
├── default_attrs.js      # Default SVG attributes (size, viewBox)
├── default_attrs.d.ts    # TypeScript types for default_attrs
├── lynx_svg.js           # Lynx SVG helper (full content + style size)
├── lynx_svg.d.ts
├── index.js              # Generated entry point (all exports)
└── index.d.ts            # Generated TypeScript declarations

License

MIT — icon SVG data is sourced from devicon (MIT).