{"id":14964271,"url":"https://github.com/coltongriffith/fluenticons","last_synced_at":"2025-04-06T15:12:22.670Z","repository":{"id":40241386,"uuid":"316502906","full_name":"coltongriffith/fluenticons","owner":"coltongriffith","description":"Fluenticons is an icon viewer for Microsofts fluent icons, with over 4000 pixel perfect icons in outlined and solid styles. Download the icons as SVG, PNG, WEBP, Vue component, React Component and HTML Image.","archived":false,"fork":false,"pushed_at":"2024-04-30T11:21:12.000Z","size":15116,"stargazers_count":311,"open_issues_count":8,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-30T14:09:50.140Z","etag":null,"topics":["icons","nuxtjs","svg","svg-icons","vue"],"latest_commit_sha":null,"homepage":"https://fluenticons.co","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coltongriffith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-27T13:02:28.000Z","updated_at":"2025-03-30T01:44:15.000Z","dependencies_parsed_at":"2024-09-13T21:52:39.283Z","dependency_job_id":null,"html_url":"https://github.com/coltongriffith/fluenticons","commit_stats":{"total_commits":75,"total_committers":7,"mean_commits":"10.714285714285714","dds":0.7066666666666667,"last_synced_commit":"4f3cdf844ae2bef968a999a889f2855a06b1da0e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coltongriffith%2Ffluenticons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coltongriffith%2Ffluenticons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coltongriffith%2Ffluenticons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coltongriffith%2Ffluenticons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coltongriffith","download_url":"https://codeload.github.com/coltongriffith/fluenticons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500468,"owners_count":20948880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icons","nuxtjs","svg","svg-icons","vue"],"created_at":"2024-09-24T13:32:54.493Z","updated_at":"2025-04-06T15:12:17.653Z","avatar_url":"https://github.com/coltongriffith.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Fluenticons Viewer\n\n4000+ pixel perfect open source icons from [Microsoft](https://github.com/microsoft/fluentui-system-icons).\n![Fluent Icons](https://fluenticons.co/social.png)\n\nThis site is not affiliated or connected to Microsoft in any way, this is just a viewer for the open-source icons from them.\n\nThis site was made because I had to open their [Figma](https://www.figma.com/community/file/836835755999342788) file every time I wanted any icons from their list, there was no search or proper tool to view them, hence I made this website as a small weekend project.\n\n---\n\n### ***New version disclaimer.***\nThis is still under development and I have been trying to work on this a little at a time. It could be updated over time without any announcement, if you'd like to contribute, you're welcome to open a PR.\n\nYou can still find the old version [here](https://github.com/fayazara/fluenticons-old)\n\n\n### What's new in v2?\n\n- No more hacks, I've used actual SVG's now, so I was able to add some new features like manipulating them.\n- You can copy snippets for SVGs, Vue component, React Component, HTML Image.\n- You can download SVGs, PNGs, WEBP, Vue component, React Component now.\n- Manipulate colors to see how the icon looks.\n- More performant, loads way too fast now. (Scores 100 on Lighthouse Yay!!). Was surprised to see the site loading in 600ms when I moved from vercel to cloudflare pages.\n\n### What's next?\n\n1. Make an advanced editor like adding frames behind the icons. Inspiration - [Bakery](https://apps.apple.com/ne/app/bakery-simple-icon-maker/id1575220747?mt=12) \u0026 [Iconscout's Icon Editor](https://iconscout.com/icon-editor) (requires a lot a math, which I am not good at.)\n2. Make a npm package for others to use the components in their own web projects.\n\n\n\n\n### Tech stack\n1. Nuxt.js\n2. Tailwind Css.\n3. Hosted on cloudflare pages.\n\n### To run the project locally\n\n```bash\n# install dependencies\n$ yarn install\n\n# serve with hot reload at localhost:3000\n$ yarn dev\n\n# build for production and launch server\n$ yarn build\n$ yarn start\n\n# generate static project\n$ yarn generate\n```\n\nFor detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).\n\n### SVG and File Cleanup\n\nThe icons are cleaned with SVGO, so you can use the same icons in your project.\n\nUse SVGO and run `svgo -r ./**/SVG/*.svg -o ../cleaned` to clean and minimise all the raw svg files.\n\nDelete all sizes except 24, since Microsoft was providing thousands of icons ins multiple sizes, which was not really needed for this project.\n\nfind `\u003cFILEPATH\u003e` -type f \\! -name \"_24_\"\n\nAppend -delete at the end to delete from the `\u003cFILEPATH\u003e`\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoltongriffith%2Ffluenticons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoltongriffith%2Ffluenticons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoltongriffith%2Ffluenticons/lists"}