replace dataset icon to more clearly differentiate it from a file

[TaniaSchlatter]

Dataverse uses icons and color to differentiate dataverses, datasets, and files. The dataset icon is hard to differentiate from file icons, because it is the same as the generic "file" icon, other than color.

This issue is to replace the dataset icon with one that indicates more than one item – a set – to help the difference between a dataset and a file be more clear, without relying on color.

dataset_icon_set_active.svg.zip
dataset_icon_set.svg.zip

[pdurbin]

@TaniaSchlatter these SVGs look great but I'm a little concerned that updating any of our icons is a can of worms. See, as described in the Style Guide, we use FontCustom for our icons:

FontCustom brings a few challenges:

• I think only one former member of the team has used FontCustom.
• From what I can tell, the way FontCustom works is that you put all your SVGs in a folder and run a command line tool on them to convert them into fonts. We have your new SVG for a dataset but I can't find the SVGs for files, etc. We would need to reproduce the environment used to set all this up.
• FontCustom seems somewhat abandoned judging from the age of recent commits and an issue I found. The domain expired but https://fontcustom.github.io/fontcustom/ seems to work.

If we want to switch away from FontCustom perhaps we could try switching from FontCustom to your SVG for datasets and in the future look into switching to SVGs for other icons like files, collections, etc. (but we'd need those SVGs, of course).

[poikilotherm]

I saw this thread in the notifications. Let me add a quick thought: we might create a CI pipeline (so avoiding local installs) to convert the SVGs to a webfont and provide the necessary CSS files. Likely to be possible to serve them from a Github Pages source, just like Google et al does it.

https://github.com/jaywcjlove/svgtofont
https://github.com/nfroidure/svgicons2svgfont
https://github.com/fontello/svg2ttf

We could use https://www.webjars.org to bundle the font into a package, integrated with the usual Dataverse Maven build. (That would allow to serve the fonts from each installation instead of relying on a "CDN" like Github)

[TaniaSchlatter]

Thanks @pdurbin and @poikilotherm. I prefer to continue to use icons converted to a font if possible if we make this change in the short-term. There are some benefits (accessibility potentially, more precise positioning) to using .svgs instead of font icons. The default icons will change with Bootstrap 4, and we might consider changing to all .svg for icons then.

[djbrooke]

• If we want to use the current process, we'd want to find all the svg icons in the application (@TaniaSchlatter has done some searching for these files, and they do exist in the codebase somewhere), get up to speed on the tool, run the tool (with the new .svg in the mix), and then get the tool output into a PR in order to update the application
• We should verify that all the other svgs are needed
• We should document either the current process or the new process (whether something @poikilotherm suggests or something else)
• We should take into account the upcoming upgrade to Bootstrap 4, as these are custom icons

[pdurbin]

During sprint planning I said I'd add a couple links here.

First, I kept mentioning the 5 or 6 files that FontCustom creates. It looks like we have copies for both the app and the guides (so I assume both need to be updated):

Here's a link to the files for the app: https://github.com/IQSS/dataverse/tree/develop/src/main/webapp/resources/fontcustom

Here's the article I mentioned: Icon Fonts vs SVGs - Which One Should You Use in 2018? - https://www.keycdn.com/blog/icon-fonts-vs-svgs

[pdurbin]

I found a post that explains a way to create SVGs from the .ttf file (TrueType font) file. Here's the command:

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' src/main/webapp/resources/fontcustom/fontcustom_47254e4da4fa5ad5e2bb7c085027ce43.ttf

Here's the terminal output:

Copyright (c) 2000-2021. See AUTHORS for Contributors.
 License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
 with many parts BSD <http://fontforge.org/license.html>. Please read LICENSE.
 Version: 20201107
 Based on sources from 2021-03-14 03:33 UTC-D.
The glyph named image is mapped to U+F103.
But its name indicates it should be mapped to U+22B7.

It created the following SVG files which I'm uploading here as icons.zip and junk.zip (for the weird .notdef and .null) files:

.notdef_fontcustom.svg
.null_fontcustom.svg
astro_fontcustom.svg
audio_fontcustom.svg
code_fontcustom.svg
dataset_fontcustom.svg
dataverse_fontcustom.svg
document_fontcustom.svg
file_fontcustom.svg
geodata_fontcustom.svg
image_fontcustom.svg
network_fontcustom.svg
nonmarkingreturn_fontcustom.svg
other_fontcustom.svg
package_fontcustom.svg
space_fontcustom.svg
tabular_fontcustom.svg
unlock_fontcustom.svg
video_fontcustom.svg

(nonmarkingreturn_fontcustom.svg and space_fontcustom.svg are in icons.zip but I'm not sure if they're used or not.)

@TaniaSchlatter can you please take a look at icons.zip and let me know if you think we can move forward with these?

• icons.zip
• junk.zip

Meanwhile, what I'd do next is try to get FontCustom installed (it's in Ruby) and see if I can get it to work with the SVGs above. @poikilotherm I haven't tried any of the alternative libraries you mentioned above but I'm open to something that seems less abandoned. From what I can tell, there's no obvious choice, no dominant player in the "create icon fonts" from the command line space.

[TaniaSchlatter]

Great that you were able to get these .svg files, @pdurbin! I have reviewed them, and they represent the up to date set that is live on Production. I was not able to see anything in the "junk" set. I expect that nonmarkingreturn_fontcustom.svg and space_fontcustom.svg are used to help with spacing in some places.

• I created a new version of dataset_fontcustom.svg (dataset_fontcustom.svg_21) that shows multiple documents to better represent the dataset.
• I created a new version of code_fontcustom.svg (code_fontcustom.svg_21) that cleans up some graphic artifacts.
• I created a new version of document_fontcustom.svg (document_fontcustom.svg_21) to better match the new dataset_fontcustom.svg_21.

[pdurbin]

@TaniaSchlatter thanks. Good news. By downgrading Ruby from 3 to 2.7 I got FontCustom to work.

• code 21 looks good
• dataset 21 looks really dark
• document 21 looks like a blank document

Here's a screenshot of the preview FontCustom creates:

I also made a zip of the preview that I hope will work for you. You need to open the file localhost:8000/scripts/icons/preview/fontcustom-preview.html after unzipping: localhost:8000.zip

[pdurbin]

I just pushed 4050bcd which include a lot of docs I wrote about the scripts I made for using Font Custom. This means that another developer is welcome to pick this up and finish it off since I'm about to go on vacation.

The main thing we need at this point is the final set of SVGs. @TaniaSchlatter is working on this. Once they're ready they can be placed in scripts/icons/svg. As I explained in the docs, I recommend using the docs.sh script to test them.

This zip should contain the icons we want with the exception of dataset.svg, which we'd like to update: svg.zip. (The icons we've been iterating on are dataset, document, and code.)

[pdurbin]

@TaniaSchlatter came through just in time with a working dataset icon! 🎉

Pull request #8021 is ready for review!