new icons

[garrett]

Here's how the new icons would look:

Things that are changed:

1. Darker color (as they can be now, as they're not filled but outline based).
2. Basic mimetypes; including just those that are available and make sense for admins.
3. Using icon SVGs from ForkAwesome, which is a fork from FontAwesome. (PatternFly's icons are also forked from FontAwesome.)
4. Emblem for symlinks.

The icons should exist in one place and be referenced instead of being inline SVG. (Using inline SVG is not great for performance at the level of a thousand items, which some system directories have.)

[garrett]

Here's what the new icons look like (out of context):

They're from ForkAwesome filetype icons: https://forkaweso.me/Fork-Awesome/icons/#file-type

Here's the file with optimized SVGs: ⬇ filetypes.zip

Screenshot crop from Nautilus:

(I've included audio and video too... why not? We can skip those though... the others are more important, really.)

The license for the icons is OFL 1.1 (which is compatible): https://forkaweso.me/Fork-Awesome/license/
Specifically: https://openfontlicense.org/

We're already using a fork of Font Awesome in PatternFly, also under the OFL.

---

We probably want to include them with an <object> tag, so the browser can cache and optimize their usage, and we can still manipulate them (to recolor them in light mode and also make them work in dark mode too). https://svgontheweb.com/

Summary of that page on usage:

	Object	Inline	Img	Background-image
CSS Manipulation	Yes	Yes	Some inline	Some inline
JS Manipulation	Yes	Yes	No	No
SVG Animation	Yes	Yes	Yes	Yes
Interactive SVG Animation	Yes	Yes	No	No

Object wins out. It looks like this:

<object type="image/svg+xml" data="image.svg"></object>

I'll include the ones we should use, but I'll make sure they're optimized.

Although, since these are basically outlines, I think we could also do clip-path with the SVGs too, which would let us handle it in pure CSS, and that would probably scale pretty well too. We could even make a single file with all of them, have an ID and use the clip-path specified by that ID. Or just use individual files. Or copy the path object out of the SVG and use it within the CSS with clip-path: path(''); — but that'd probably require hardcoding the size and scaling it in Inkscape for each.

[garrett]

The link badge is PatternFly's fa-arrow-circle-up icon. (The "FA" mean FontAwesome, BTW.) It's been rotated to the right by 45° (which we can do with CSS) and placed in the top-right of the area (which we can do with position: absolute). It'd probably also need a pass-through with pointer-events: none.

[briansmith0]

For file types that the web browser can display (such as images), will the user be able to double click on the file to display it in the web browser?