runxel / kirby-simpleicons
Provides easy Kirbytext access to the 'simple icons' package.
Installs: 8
Dependents: 0
Suggesters: 0
Security: 0
Stars: 9
Watchers: 3
Forks: 1
Open Issues: 0
Type:kirby-plugin
Requires
This package is auto-updated.
Last update: 2024-11-24 19:20:25 UTC
README
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 insite/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.