Awesome

Simple-Icons for Kirby

A plugin for Kirby 3 to have an easy access to simple-icons in Kirbytext.
This plugin allows you to use almost any major brand icon you'd want, without having to source, optimize, and upload these logos yourself.

Similar plugin

"But I don't need brands!"
→ Yeah, maybe this is what you're looking for then :)

Installation

Choose one of the following:

• Using composer: composer require runxel/kirby-simpleicons; the plugin will automagically appear in site/plugins.
• Download a zip of the latest release and put the contents into site/plugins/simpleicons.
  Please be aware you have to solve the dependencies on your own.

Git Submodules is currently not supported, but you can try that anyway, of course :)

Dependencies

Please be aware that this plugin uses the simple-icons Composer package.
If you're not using composer to install the plugin you have to download the icons by yourself.

Even tho there are CDNs available I don't recommend to use them. SVG can have executable code and also the CDN can track users on your site.

Usage

As simple as using (icon:brandname) in a text.
Works wherever your text will be rendered as Kirbytext.
The svg will be served inline <sup id="a1">[1]</sup> and inside a span with a fixed class of .simpleicon.
You can however specify your own, additional class like this (icon:github class:myclass)

To see all available icons please go to simpleicons.org.
If you think there is an icon missing DO NOT request it here, but at the simple-icons repo.

<span id="f1" style="color: #888">[1]</span> This is done so you can style it with a fill thru CSS. ↩

Configuration

To assure the svgs won't look off, you need some proper styling via CSS, like the following:

.simpleicon { /* span */
    display: inline-block; /* important! */
    /* size can be adjusted to your taste */
    height: 1em;
    width: 1em;
    fill: var(--text-color); /* color the svg */
}

.simpleicon svg { /* not a must, just for your taste */
    vertical-align: middle;
}

Disclaimer

This plugin is provided "as is" with no guarantee. If you find any issues, please create a new issue.