viivue / acf-icomoon Goto Github PK

View Code? Open in Web Editor NEW

3.0 3.0 0.0 1.29 MB

🔩 Advanced Custom Field add-on to select IcoMoon

Home Page: https://wordpress.org/plugins/acf-icomoon/

PHP 45.17% CSS 20.35% JavaScript 34.48%

acf-addon advanced-custom-fields icomoon vue3 vuejs wordpress wordpress-plugin

acf-icomoon's Introduction

viivue

acf-icomoon's People

Contributors

Stargazers

Watchers

acf-icomoon's Issues

Filter to display only some specific icons

We don't have to show all of the icons in the popup. Some of them are just used for system UI.
So, it's nice to have a filter here, and manageable somewhere in the admin.

Adjusted path to selection.json not working

Trying to adjust the path in the acf field to assets/fonts/icomoon/selection.json or dist/fonts/icomoon/selection.json will result in an empty overlay (where you can actually select the icons).

Improve search UX

I think it would be nice if

We have some messages for the case that no items were found after searching 👀.
There are some loading icons 💨 when searching, so users can know that they are doing the search task.

Icomoon field doesn’t work when use it in repeater field for Gutenberg editor

Linked with this issue on WP.

Icomoon field don’t save in post or page, if use field in repeater mode for Guttenberg block. With like settings.

Otherwise, nice pluggin. Thanks for your work.

You are running a development build of Vue.

I am getting this message logged in my console:

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

isMulticolor not supported?

Hi there,

I just discovered your plugin, great work thanks!

The only reason I'm using IcoMoon in this project I'm currently developing and not Grunt webfont for example, is because I needed a Duotone icon font, following this guide. It all works well, the downloaded demo files are in duotone but IcoMoon uses <span> inside the <i> to override the colors.

In my selection.json file I can see all the color definitions in every icon, for example:

{
    "icons":
    [
        {
            "attrs":
            [
                {
                    "fill": "rgb(244, 159, 64)"
                },
                {
                    "fill": "rgb(0, 0, 0)"
                },
                {
                    "fill": "rgb(0, 0, 0)"
                }
            ],
            "icon":
            {
                "attrs":
                [
                    {
                        "fill": "rgb(244, 159, 64)"
                    },
                    {
                        "fill": "rgb(0, 0, 0)"
                    },
                    {
                        "fill": "rgb(0, 0, 0)"
                    }
                ],
                "colorPermutations":
                {
                    "1244159641":
                    [
                        {
                            "f": 1
                        },
                        {
                            "f": 0
                        },
                        {
                            "f": 0
                        }
                    ]
                },
                "grid": 0,
                "isMulticolor": true,
                "isMulticolor2": false,
                "paths":
                [
                    "M761.6 675.2c25.6 0 44.8-19.2 44.8-44.8v-217.6c0-25.6-19.2-44.8-44.8-44.8h-697.6v304h697.6zM448 425.6c0-6.4 6.4-12.8 12.8-12.8h41.6c9.6 0 12.8 9.6 9.6 16l-28.8 76.8h28.8c9.6 0 16 9.6 9.6 19.2l-60.8 102.4c-3.2 6.4-16 3.2-16-3.2l9.6-83.2h-28.8c-6.4 0-12.8-6.4-12.8-12.8l35.2-102.4z",
                    "M992 412.8c-19.2 0-32 16-32 32v108.8c0 19.2 16 32 32 32s32-16 32-32v-105.6c0-19.2-16-35.2-32-35.2z",
                    "M848 240h-784c-35.2 0-64 28.8-64 64v412.8c0 35.2 28.8 64 64 64h784c35.2 0 64-28.8 64-64v-412.8c3.2-35.2-25.6-64-64-64zM848 675.2c0 25.6-19.2 44.8-44.8 44.8h-694.4c-25.6 0-44.8-19.2-44.8-44.8v-326.4c0-25.6 19.2-44.8 44.8-44.8h697.6c25.6 0 44.8 19.2 44.8 44.8l-3.2 326.4z"
                ],
                "tags":
                [
                    "battery"
                ]
            },
            "iconIdx": 0,
            "properties":
            {
                "code": 59648,
                "codes":
                [
                    59648,
                    59649,
                    59650
                ],
                "id": 2,
                "name": "battery",
                "order": 2,
                "prevSize": 32
            },
            "setId": 0,
            "setIdx": 0
        },
    ],
}

In the field settings I used both Icon element (HTML) as SVG element as return value;
Icon stays blank (because it's missing the spans), SVG is rendered correctly but in monotone (because it's missing the colors).

Is this currently not supported (yet) in your plugin?
Thanks a lot!

Search icons inside popup

Most of the time, these icons are a bit too many for people to look around and pick the right one.
A real-time search/filter would help a lot.

Clear search result when duplicating ACF repeater fields

When using the Shift key + click to duplicate the ACF repeater item, I think the ACF Icomoon search result should be reset. In that way, I can do another search to update the new icon for the duplicated item.

@phucbm Could you test this behavior when doing the new project?

viivue / acf-icomoon Goto Github PK

acf-icomoon's Introduction

viivue

acf-icomoon's People

Contributors

Stargazers

Watchers

acf-icomoon's Issues

Filter to display only some specific icons

Adjusted path to selection.json not working

Improve search UX

Icomoon field doesn’t work when use it in repeater field for Gutenberg editor

You are running a development build of Vue.

isMulticolor not supported?

Search icons inside popup

Clear search result when duplicating ACF repeater fields

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent