SAMPLE APP: 286 SVG Icons with Dynamic Colors

GreenFlux · 12-12-2020 10:34 AM

This sample app is built using free (open source) icons from www.feathericon.com by Cole Bemis.
All credits to Cole for the SVGs.

The SVGs are stored as raw text.
Then a virtual column (image) is created using the selected color.

I’ve made the spreadsheet public, so you can copy just the data and insert it in your own app.

https://docs.google.com/spreadsheets/d/1BqwhxzVTJsiXPhI4MwFqp6-w11gD39G7CWofXRIVRsQ/edit?usp=sharing

Or you can copy the sample app, here:
https://www.appsheet.com/samples/Free-SVG-Icons?appGuidString=49449e6f-28bf-4ec8-8a88-b8aba81e106f

In this sample, I’m only using the standard 16 color pallet, but you can actually use tons of other colors!.

Batch Converting SVGs for use in AppSheet

Here’s how I gathered the data and formatted for AppSheet:

Downloaded full set of SVG icons (64px, 2px stroke, gray)
Batch renamed *.svg to *.txt (Mac/Finder)
Merged all text files into a single text file (Mac Terminal, cat *.txt >> ~/Desktop/combined.txt)
Find/Replaced the start of each SVG with a new line return to separate them on the clipboard, and copied
Pasted into Google Sheets, resulting in raw text for each SVG in a separate cell.
Added data:image/svg+xml;utf8, to the beginning of each SVG text.
Realized I should have added the data:image... during the Find/Replace in step 4.
Realized I needed a break and went for a 6 mile run that turned into 9 miles.
Made this post.

Steve

Show-off.

GreenFlux

It was not an impressive pace. Found a new trail and took a major detour.

Do you run, @Steve? Where are my runners at?
My 2021 goal is 624 miles. 15 mi/wk * 52 weeks * 0.8 (80% of target weekly goals).

Grant_Stead

So… You use a mac?
I. See.

GreenFlux

I was actually surprised to find that I could do the batch file extension change using the built-in file manager. I don’t think Windows can do that. I thought I was going to have to download a program, but Google told me I already had what I needed lol.

GreenFlux

At first I was going to use a different approach, and downloaded different colored versions of each SVG. I ended up not needing them, but they’re free to use, so I figured I’d share the folder for anyone else that wants to use them.