SAMPLE APP: 286 SVG Icons with Dynamic Colors

AppSheet Tips & Tricks
,
1

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

3X_a_a_aa125de4fac38673db50e40ed27a206f3237a8f6.gif

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

3X_d_a_daa2581af9702f2d275f791ec2805b841e740211.png
3X_d_a_daa2581af9702f2d275f791ec2805b841e740211.png1776×887 233 KB

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:

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

GreenFlux:

  1. Realized I needed a break and went for a 6 mile run that run turned into 9 miles. > 1. Made this post.

Show-off.

1 Like
3

GreenFlux:

(Mac/Finder)

So… You use a mac?
I. See.

4

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.

2 Likes
5

Grant_Stead:

So… You use a mac?> I. See.

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.

1 Like
6

Steve:

GreenFlux:> > > 1. Realized I needed a break and went for a 6 mile run that turned into 9 miles. > > 1. Made this post.> > Show-off.

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).

3 Likes