tobimori / kirby-icon-field Goto Github PK

View Code? Open in Web Editor NEW

36.0 3.0 3.0 139 KB

🏷️ A simple Icon field plugin for Kirby CMS.

Home Page: https://getkirby.com/plugins/tobimori/icon-field

License: MIT License

Shell 0.61% PHP 31.97% JavaScript 5.51% Vue 61.91%

kirby kirby-plugin kirbycms

kirby-icon-field's Introduction

Kirby Icon Field

A simple Icon field for Kirby 4+ - throw your Icon pack in a folder, add the field to your blueprints and you're good to go.

If you're using Kirby 3.9+, please try using v1.0.3.

Installation

Recommended: Composer

composer require tobimori/kirby-icon-field

Manual installation

Download and copy this repository to /site/plugins/kirby-icon-field, or apply this repository as Git submodule.

Usage

This plugin relies on having your SVG icons as separate files in a folder for display in the panel - of course you're free to do whatever you want with the field's value in your templates.

Icons will always be displayed in single-color white or black.

Add the field to your blueprint:

fields:
  icon:
    label: Icon
    type: icon
    folder: assets/icons # path to your icon folder, relative to the `index` kirby root
    max: 1 # max number of icons to select - 1 will look like a 'select field', none or more like a 'multiselect' field
    sprite: svg-sprite.svg # optional, path to your svg sprite relative to folder option, if you want to use a sprite instead of individual files
    # [more settings...] - same as multi-select field, e.g. disabling search, limiting icons, etc.

Note

If you're using a sprite, make sure the file is available for the user to access at the set path. The plugin does not copy or move the file, it only references it. The #id reference will be stored without a .svg extension unlike the individual files mode.

Use the field value in your template

<?= svg('/assets/icons/' . $page->icon()) ?>

Options

Option	Default	Description
`cache`	`true`	Enable cache for reading from icons directory
`folder`	`assets/icons`	Default folder for icon field, can also be a function
`sprite`	`null`	Default file for SVG sprite file, can also be a function

Options allow you to fine tune the behaviour of the plugin. You can set them in your config.php file:

return [
    'tobimori.icon-field' => [
        'cache' => true,
        'folder' => 'assets/icons'
    ],
];

Support

Note

This plugin is provided free of charge & published under the permissive MIT License. If you use it in a commercial project, please consider to sponsor me on GitHub to support further development and continued maintenance of Kirby Icon Field.

License

The icons in the preview image are part of Chunk Icons by Noah Jacobus. <3

kirby-icon-field's People

Contributors

Stargazers

Watchers

Forkers

timnarr maxxst adamkiss

kirby-icon-field's Issues

not working with kirby 4.0.0-rc.1

Since the latest kirby version I cannot pick an icon. with the beta-2 of kirby it worked fine.
If an icon is already selected and I want to delete it, the following error shows in the console:
index.min.js:1 TypeError: Cannot read properties of undefined (reading 'move')

And there are also a lot of deprecated warnings:

index.min.js:1 Problem with plugin trying to register component "k-icon-selector-dropdown": cannot extend non-existent component "k-selector-dropdown"
index.min.js:1 Problem with plugin trying to register component "k-icon-selector": cannot extend non-existent component "k-selector"

Colored icons preview in field

Hi there, when I try to implement coloured icons, in the field preview I see only the background of these icons.
Is there any ability to make them viewable because right now I can orient only with the icon name

Search options

I found this treat in the plugin definition:

				/**
				 * Enable/disable the search in the dropdown
				 * Also limit displayed items (display: 20)
				 * and set minimum number of characters to search (min: 3)
				 */

It would be great to have this documented in the readme.

Vue appereance editable via config-value

Maybe it is a good idea to somehow store in the config if you want to color the fill or the stroke from the icons in the panel.
For e.g. if you use feather icons, the iconfont has outlines only, so the icons currently appear as "white blocks" in the dropdown.

Structure preview

[v2] Support for SVG symbol library

Lazy-loading icons

Last one (sorry for filling your issues here!):

We have a large collection of icons which will always be loaded in full on page load (3.5 MB in our case).
It would be great if icons would only be fetched when opening the picklist and if there was server side filtering applied.

I know this is an issue of the core as well, see getkirby/kirby#6043, but I think with icon sets this will become an issue for this plugin quicky.

[v2] Caching bugs

Will have to investigate further, but in some cases the field didn't load on the production server of Vierbeiner in Not. Seemingly fixed itself by removing 'extends' => 'tags' line and adding it again.

Forced icon styling

Kirby 4 has this definition in its styles:

:where(svg) {
  fill: currentColor;
}

This can render outline icons into white/black boxes.

I'm not sure if there is a way to reset this for icons within this plugin's components and default to the fill attribute in the markup. But it would be great if:

there was a setting for fill in the blueprint or
there was a note in the readme how to prevent this with a custom panel CSS.