MDI

Das MDI-Plugin ermöglicht die Verwendung von Material Design Icons in Markdown-Dateien.

:mdi[skateboarding]{color=green}
:mdi[skateboarding]{.red size=2em}
:mdi[skateboarding]{.orange .xl}

http://localhost:3000

Das MDI-Plugin importiert nur die benötigten Icons und fügt sie als <Icon path={...} />-Elemente in den Markdown-Code ein. Dadurch wird die Ladezeit der Seite optimiert und die Bundle-Grösse reduziert.

Optionen

title

Wird als title-Attribut verwendet - bei (langem) Hover über das Icon wird der Text angezeigt.

:mdi[skateboarding]{title=Skating}

description

Für Screenreader - description wird als aria-label verwendet, title muss auch gesetzt sein.

:mdi[skateboarding]{title=Skating description="Human on Skateboard"}

size

Grösse des Icons - spezifizierbar in jeder validen CSS-Einheit.

:mdi[skateboarding]{size=20px}

horizontal

Das Icon horizontal spiegeln.

:mdi[skateboarding]{horizontal}

vertical

Das Icon vertikal spiegeln.

:mdi[skateboarding]{vertical}

rotate

Das Icon um die angegebene Anzahl Grad rotieren.

:mdi[skateboarding]{rotate=120}

color

Farbe des Icons - kann als Farbname, Hex-Code oder CSS-Variable angegeben werden.

:mdi[skateboarding]{color=turquoise}

spin

Das Icon rotieren lassen - in der angegebenen Anzahl Sekunden pro Umdrehung.

:mdi[skateboarding]{spin} :mdi[skateboarding]{spin=-2}

:mdi[skateboarding]{spin=10}

MDI-Icons finden

👉 MDI Selektor

Installation

Code

• src/plugins/remark-mdi

npm

yarn add @mdi/js @mdi/react

docusaurus.config.ts

Das Color-Mapping wird für die direkte Farbzuweisung der Icons (z.B. :mdi[skateboarding]{color=green}) verwendet. Das Default-Size-Attribut legt die Standard-Grösse der Icons fest.

docusaurus.config.ts

import mdiPlugin from './src/plugins/remark-mdi/plugin';

const REMARK_PLUGINS = [
    /* ... */
    [
        mdiPlugin,
        {
            colorMapping: {
                green: 'var(--ifm-color-success)',
                red: 'var(--ifm-color-danger)',
                orange: 'var(--ifm-color-warning)',
                yellow: '#edcb5a',
                blue: '#3578e5',
                cyan: '#01f0bc'
            },
            defaultSize: '1.25em'
        }
    ],
];

Styles

Um das Aussehen der Icons über Klassen zu steuern (z.B. :mdi[skateboarding]{.xl}) müssen diese im globale custom.scss definiert werden.

src/css/custom.scss

.markdown {
    .mdi-icon {
        transform: translateY(20%);
        &.green {
            color: var(--ifm-color-success);
        }
        &.red {
            color: var(--ifm-color-danger);
        }
        &.orange {
            color: var(--ifm-color-warning);
        }
        &.yellow {
            color: #edcb5a;
        }
        &.blue {
            color: #3578e5;
        }
        &.cyan {
            color: #01f0bc;
        }
        &.m {
            font-size: 1.25em;
        }
        &.l {
            font-size: 1.6em;
        }
        &.xl {
            font-size: 2rem;
        }
    }
}