Avatar joachim.sator asked

yootheme pro: individual icon for icon widget

Hi asked Thomas and I've got this advice for intergrate an individual icon, but it does not work yet ...:

edit \templates\yootheme\vendor\yootheme\theme\app\vue.min.js and add an entry for your icon
...,"play-circle","my-icon],"Device Icons"...
Ok - done!

edit \templates\yootheme\vendor\yootheme\theme\app\data\icons.json and add an entry for your icon
... "play-circle", "my-icon"
], "Device Icons": [ ...
Ok - done!

edit \templates\yootheme\vendor\assets\uikit\dist\js\uikit-icons.min.js and add an entry for your icon and its svg code
`,"play-circle":'<svg width="20" height="20"...>...</svg>',"my-icon":'<svg height="20" width="20" ...>...<path ...></path></svg>',...
There is no uikit-icons.min.js to find!

I have still done that:
/wp-content/themes/yootheme/vendor/assets/uikit/src/images / edit: veldensteinstern.svg

/wp-content/themes/yootheme/vendor/assets/uikit/images / edit:
<symbol id="veldensteinstern" viewBox="0 0 20 20">
<polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon>
</symbol>

What's still wrong?
Thank's a lot Joachim

  • WordPress
  • UIkit
  • YOOtheme Pro

Edited

7 Answers

1

Avatar thomas.p Support answered

Hi Joachim,

I managed to add your icon to a demo installation by using npm and compiling UIkit 3 as described in the UIkit 3 docs.

Image

Image

However, I can't manage to do so on your end, too.

You are missing a , in your icons.json file at

    "play-circle"  
    "veldensteinstern"

But that's not the core problem. As you alread indicated, the files uikit-icons.js and uikit-icons.min.js are missing, because they seems to have been added in a later version. The oldest version I have is 1.3.13 that already contains these files.

If it's not a must for you to run version 1.3.8, you might want to consider an update. The files should then be added. You should test it first on a development copy of your site, though.

I uploaded the compiled icon files for you, if needed.

uikit-icons.js
uikit-icons.min.js

0

Avatar thomas.p Support answered

Hi Joachim,

generally, this kind of customization is out of the scope of support, I'm sorry. Note that it also is possible to add svg icons via an image element or using the UIkit uitility attribute uk-svg.


To your question: In the initial post I advised to add the svg code to the file uikit-icons.min.js. You said you don't have this file. Do you have a file uikit-icons.js in the same folder?

Kind regards
Thomas

0

Avatar joachim.sator answered

In this folder I can only find:
/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.min.js
/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit.js
/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-core.min.js
/wp-content/themes/yootheme/vendor/assets/uikit/dist/js/uikit-core.js

0

Avatar thomas.p Support answered

Ok, can you please add ftp access to your site and also a link to the svg icon you want to use in the hidden info field?

I'll see if I can check this during the weekend.

0

Avatar benjamin.meyer answered

Hi Thomas,
...i'm working on a wordpress site with yootheme pro and i want to have custom svg icons in the same way you described above:
"I managed to add your icon to a demo installation by using npm and compiling UIkit 3 as described in the UIkit 3 docs."

I tried it myself but i can't get it running :(

Can you please describe it with a few more words and regarding to an yootheme pro installation based on wordpress:
https://getuikit.com/docs/custom-icons

In which folder (remeber: wp installation) do i have to put my custom icons? WIch folder do i have to complie? How?

best regards
Beni

0

Avatar thomas.p Support answered

@benjamin.meyer

In which folder (remeber: wp installation) do i have to put my custom icons? WIch folder do i have to complie? How?

It doesn't matter, whether you use WP or J!. The UIkit files are the same. Simply compile the complete UIkit package, this includes the icons. Do it by running the npm command as stated in the docs. npm is a JS package manager with its own extensive documentation.


Should you need further assistance: According to this support system's policy of "One question per question" create a new, separate question (= thread) on each issue, please.

When you do so, please provide as much details as possible to improve your chances of getting a useful answer, and of course post a link to your site and a page showing your issue.

Do not ask more than one question at a time, do not add further questions to the same question/thread.

This is not meant to put you off but rather to be able to focus on one issue at a time in order to help you and others with a similar problem.

Thank you

Know someone who can answer? Share a link to this question via email or twitter.