dmhendricks / file-icon-vectors Goto Github PK

I just what to thank you for these vector icons, I will start using it and spreading the word as much as I can!

Once again thank you!

I really like your icon pack.
Some icons I would like to see are for .eml / .msg files and folder open.
Especially in the square icons.

Thanks

This repository has not been updated since 2020. Is it dead now?

Would it be possible for you to make a release so that what is in master hits npm, jsdeliver etc?

if an icon doesn't exist is there a way to show a default one for an extension not recognized?

kind regards

Hello,

First, thank you for this library, it's great 👍

My problem is: when I build my project (ng build), all svg are stored in root folder beside the built main files.

Could you put all those files in a directory? Maybe in the assets folder like this:

• dist
  • webapp
    • assets
      • fonts
      • images
      • material-icons
      • stylesheets
      • file-icon-vectors
        • all svg icons
        • ...
    • favicon.ico
    • index.html
    • main.js
    • main.js.map
    • main.js.map
      ...

Regards

Fantastic repository! Noticed it's missing OpenDocument Presentation (ODP) format. Mocked up something in Inkscape based on the existing ODS icon, needs improving, but a starter for 10?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 100 100"
   version="1.1"
   id="svg62"
   sodipodi:docname="odp.svg"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
  <metadata
     id="metadata68">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs66" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     id="namedview64"
     showgrid="false"
     inkscape:snap-page="false"
     inkscape:zoom="8.5"
     inkscape:cx="42.647059"
     inkscape:cy="50"
     inkscape:window-x="564"
     inkscape:window-y="1077"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg62" />
  <style
     id="style54">.st1{fill:#1f7244}</style>
  <path
     fill="#ffffff"
     d="M 2,0 H 102 V 100 H 2 Z"
     id="path56" />
  <path
     class="st1"
     d="M100 100H0V0h100v100zM9.7 90h80.7V10H9.7"
     id="path58"
     style="fill:#f37738;fill-opacity:1" />
  <g
     id="g1015">
    <path
       id="path86"
       style="fill:#f37738;fill-opacity:1;stroke:#f37738;stroke-width:8.40346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
       d="M 71.269531,39.733795 A 13.908049,34.078877 77.524467 0 1 29.466797,49.334121 V 66.751953 H 71.269531 Z" />
    <path
       d="m 48.8,27.8 h 2 c 3,0.2 5.3,0.9 7.6,1.9 4.4,-2 10.6,-0.5 14.6,1 -5,-0.5 -10.9,0 -14.3,2 -3.5,-2.8 -10,-3.6 -16.1,-2.8 1.7,-1.2 3.8,-1.9 6.2,-2.1 z"
       id="path80"
       style="fill:#f37738;fill-opacity:1" />
    <path
       d="m 47.5,35.3 c -3.6,0.2 -6.5,1.4 -8.4,3 -5.9,-2.7 -16.1,-1.5 -19.9,2.1 -0.3,0.2 -0.7,0.5 -0.6,0.8 3.4,-1 7.4,-1.9 11.6,-1.5 4.2,0.3 7.3,1.7 9.6,3.6 4.3,-3.8 10.6,-6 18.6,-5.9 -2.8,-1.3 -6.9,-2.3 -10.9,-2.1 z"
       id="path82"
       style="fill:#f37738;fill-opacity:1" />
    <rect
       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:8.96843;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
       id="rect949"
       width="8.4705887"
       height="14.135611"
       x="34.823532"
       y="51.099682" />
    <rect
       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:6.65805;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
       id="rect949-5"
       width="8.4705887"
       height="7.7906733"
       x="45.823528"
       y="57.444618" />
    <rect
       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10.6004;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
       id="rect949-52"
       width="8.4705887"
       height="19.748121"
       x="56.823528"
       y="45.487171" />
  </g>
</svg>

Hi, this looks like an awesome set, any chance we could get a couple of new icons for the filetypes GLB (glTF) and USDZ?

Hello Hendricks,

Thanks for this work. Is it possible to generate all these in greyscale. The vivid images in greyscale will make it appear nicer for tiny icons. It will also be suitable for a page is meant to be less colorful.

Thanks

Great stuff Daniel. Thank you.

Could you make it available over cdnjs?
It's also free like jsdelivr but more popular:
https://w3techs.com/technologies/comparison/cd-cdnjs,cd-jquerycdn,cd-jsdelivr

Hi @dmhendricks
Congrats on your project. The icons are beautiful and the variety is awesome.

I wonder if you could publish your project to npm. You just need to create an account at npmjs, then

npm login
npm publish

The name file-icon-vectors is available BTW.

Having your project available on npm would allow to install it in webpack based projects which use npm instead of bower.

Also, I say you mentioned in the TODOS to add the project to a CDN. This is already available using jsdelivr

https://cdn.jsdelivr.net/gh/dmhendricks/[email protected]/css/file-icon-classic.css

But if you publish to npm, you could also use unpkg which is reccomended over the former (see Esri/esri-leaflet-doc#82 and jsdelivr/jsdelivr#13136). The url would be friendlier:

https://unpkg.com/file-icon-vectors/css/file-icon-classic.css

Title says it all. We need our beats! Same goes for flac =]

Hey Daniel,
good job with the vector icons but the installation doesn't work for me.

I got this Error:

Could not find package dmhendricks/file-icon-vectors at any version for your minimum-stability (stable). Check the package spelling or your minimum-stability

• Composer version 1.5.2
• System Windows 10

Can you also add it to npm?

Best,
Julian

Thanks for your work! I've incorporated your icons in my Slack Archive Bot project (recognitions at the bottom of this page: https://slackarchive.silverstripe.org/about/ )

A few icons I found missing though, were:

• objective-c
• Scheme
• Quicktime (probably a legal issue?)
• Perl

Thanks again for your effort and this is just a little remark, nothing big :)

Please add an icon to .numbers files

Added

• New web site
  • TODO: Add ability to search/filter icons
• Ability to change between Release and Development branches on demo page
• Added dark mode switch (upper-right corner) to view icons with dark background

In Development

• Sneak peek: New icon set named High Contrast, inspired by VS Code
• Open folder by popular request (many more to come)

Release 1.0 - Known Bugs

• Vivid Set: COFFEE icon is missing white background
• Bower release didn't update due to release tag not using semver

I am working on a new collection called "Square Outline," modified from and inspired by Cotne Nazarashvili.

NB! This is very much a work-in-progress - many of the icons have sizing inconsistencies, or are just slugs until I find time to work on them. ⏰

Goals

• Square & Simple
• Icons do not have text labels.
• They are meant to differentiate files visually and not to explicitly say, "This file has XYZ extension."

Request for Comment/Ideas

I am not happy with all of the icons used so far (click the "Square Outline" tab - I didn't create anchors for the tabs yet; keep in mind that I just started on this collection). Some that I could use some ideas on:

• HTM and HTML need a decent icon representative of... HTML files. Ideas? I realize that the current slugs are fugly. I'd like something single-color and easily recognizable as an HTM(L) file. If you have a decent idea - even if it isn't free - I can find/make something that is similar, so please share. I was thinking of just making it the globe: 🌐
• JSX - For now, I just used the React icon, slightly thicker. Something better? (I still have to add JSX - and several other new extensions - to the other collections, but wanted to figure out a decent icon for it first)
• I think I'm going to change the PHP icon from the logo to the letters. I am trying to avoid using text (with exceptions - TS can be used for very different things; I also think the Sass logo for SASS and SCSS looks pretty), but the elephant doesn't look good and the oval logo is too difficult to read at small sizes. I suppose that I could use something like <?. I will think about it. Feedback welcome!
• 💡 The icon for the archive formats looks like it has "too much detail" for this collection. Ideas for a more simple vector to represent compressed files/archives?
• 💡 Does anyone have a decent/better idea for ASP. I'd like to convey "classic" Microsoft (joking aside), and may use it for other icons as appropriate, but the old-school logo isn't doing it for me. I had considered just using a <%.
• The BAT, CMD, COM icons don't look right. I will probably just reduce the boldness of them and tweak size.
• Any decent ideas for a better icon for LESS? (which I would probably use for all 3 collections, as appropriate)
• I like the JS icon because it is bold, but I don't know if it is the most appropriate representation. I'm not sold on the color - at minimum, it shouldn't blend with the CSS icon.
• 💡 I am not a fan of the CSS icon. Ideas?
• I know that the Adobe letters are a too big. Are there any other Adobe extensions that I should add (or any other, for that matter)?
• 💡 Which common developer extensions did I miss? (I would add these to all collections, ofc - my goal is to keep them sync'd)

FYI - any new extensions added to this collection will also be added to the other collections before the next release.

Thank you,
Daniel

While you have so much extensions already covered, is it possible to add one generic file design? This could be used if no extension can be resolved, so at least the file icon looks like your style.

Microsoft's Fluent UI uses this for example:

• Docx: https://spoprod-a.akamaihd.net/files/fabric-cdn-prod_20200515.001/assets/item-types/32/docx.svg
• Generic: https://spoprod-a.akamaihd.net/files/fabric-cdn-prod_20200515.001/assets/item-types/32/genericfile.svg

There are so many things to tweak, fix and make consistent. There are so many icons to add. Time is precious.

My goal for release 0.9.0 is to get the current sets sync'd. There are about 60 icons not present among the sets.

UPDATE 18 Jul 2018: I'm down to 12 icons missing from Square Outline.