Skip to content
A plugin for Kirby 3 to get simple-icons in Kirbytext.
PHP
Branch: master
Clone or download
Latest commit ae37cdf Jan 10, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
tags
.gitignore
LICENSE
README.md
composer.json
index.php

README.md

Simple-Icons for Kirby

Kirby Version Packagist License

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 [1] 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.

[1] 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.

You can’t perform that action at this time.