Best way to allow selection of SVG?

JavaScript
1

I’m building a custom Gutenberg Block in Wordpress, which basically uses react to build the backend portion.

I need a way to allow a user to select from a list of SVG’s (in this case Font Awesome Icons). Basically I have all of the SVG files downloaded for each icon, and I need a way to allow the user to select the SVG they want to use, which means I need a means of creating a list of them that can be used to populate a dropdown.

The best I can come up with is to create a JSON file like [ { "id": "comment-dots", "family": "Font Awesome", "sub-family": "solid", "name": "Comment Dots", "path": "<path d='M168.2 384.9c-...>" },...

As far as I know, no such JSON file already exists, and there are hundreds (thousands?) of Font Awesome icons, so I’d have to build it (though I could probably come up with a python one-line to loop through them).

Is there an already established and logical way to populate lists of icons assuming I have the SVG files for them?

One particular nuance is that I want to be able to add, at some point, more icons other than just the Font Awesome to the same file in case I want to expand the available icon options to other icon families.

1 Like
3

You will have to specify the files available somewhere. JSON, HTML, somewhere. Javascript cant search a remote server’s directory. (or for that matter, a local directory.)

Depending on what you’re using on the server end of the code (PHP, Java, Ruby, Python, etc) , you may be able to scan the server’s directory and use the server side scripting to build the list for you, but as this is in the Javascript forum… shrug

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.