fluenticons
所属分类：图标/字体
开发工具：Vue
文件大小：10500KB
下载次数：0
上传日期：2023-05-24 22:01:38
上 传 者：
sh-1993
说明： Fluenticons是微软流畅图标的图标查看器，有超过4000个像素完美的轮廓和实体图标...
(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.)
文件列表:
.editorconfig (207, 2023-05-25)
.env.example (89, 2023-05-25)
assets (0, 2023-05-25)
assets\css (0, 2023-05-25)
assets\css\fonts.css (1949, 2023-05-25)
assets\css\styles.css (6110, 2023-05-25)
assets\fonts (0, 2023-05-25)
assets\fonts\Inter-400-cyrillic-ext1.woff2 (9748, 2023-05-25)
assets\fonts\Inter-400-cyrillic2.woff2 (6500, 2023-05-25)
assets\fonts\Inter-400-greek-ext3.woff2 (4992, 2023-05-25)
assets\fonts\Inter-400-greek4.woff2 (8288, 2023-05-25)
assets\fonts\Inter-400-latin-ext6.woff2 (22192, 2023-05-25)
assets\fonts\Inter-400-latin7.woff2 (17156, 2023-05-25)
assets\fonts\Inter-400-vietnamese5.woff2 (4020, 2023-05-25)
assets\icons (0, 2023-05-25)
assets\icons\fluent (0, 2023-05-25)
assets\icons\fluent\filled.json (269820, 2023-05-25)
assets\icons\fluent\outlined.json (273755, 2023-05-25)
assets\icons\material (0, 2023-05-25)
assets\icons\material\filled.json (168248, 2023-05-25)
assets\icons\material\outlined.json (183013, 2023-05-25)
components (0, 2023-05-25)
components\Auth (0, 2023-05-25)
components\Auth\Login.vue (3551, 2023-05-25)
components\Auth\Register.vue (4860, 2023-05-25)
components\Auth\SocialLogin.vue (898, 2023-05-25)
components\Base (0, 2023-05-25)
components\Base\Accordian.vue (1624, 2023-05-25)
components\Base\EmptyState.vue (8155, 2023-05-25)
components\Base\FavoritesDownloadManager.vue (1686, 2023-05-25)
components\Base\FavoritesEmpty.vue (226, 2023-05-25)
components\Base\Hero.vue (3088, 2023-05-25)
components\Base\HeroSponsors.vue (982, 2023-05-25)
components\Base\Navbar.vue (7902, 2023-05-25)
components\Base\NotFound.vue (522, 2023-05-25)
components\Base\SearchFocus.vue (350, 2023-05-25)
components\Base\advancedEditor.vue (1159, 2023-05-25)
... ...
# Fluenticons Viewer
4000+ pixel perfect open source icons from [Microsoft](https://github.com/microsoft/fluentui-system-icons).
This site is not affiliated or connected to Microsoft in any way, this is just a viewer for the open-source icons from them.
This 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.
---
### ***New version disclaimer.***
This 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.
You can still find the old version [here](https://github.com/fayazara/fluenticons-old)
### What's new in v2?
- No more hacks, I've used actual SVG's now, so I was able to add some new features like manipulating them.
- You can copy snippets for SVGs, Vue component, React Component, HTML Image.
- You can download SVGs, PNGs, WEBP, Vue component, React Component now.
- Manipulate colors to see how the icon looks.
- 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.
### What's next?
1. 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) & [Iconscout's Icon Editor](https://iconscout.com/icon-editor) (requires a lot a math, which I am not good at.)
2. Make a npm package for others to use the components in their own web projects.
### Tech stack
1. Nuxt.js
2. Tailwind Css.
3. Hosted on cloudflare pages.
### To run the project locally
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
```
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
### SVG and File Cleanup
The icons are cleaned with SVGO, so you can use the same icons in your project.
Use SVGO and run `svgo -r ./**/SVG/*.svg -o ../cleaned` to clean and minimise all the raw svg files.
Delete all sizes except 24, since Microsoft was providing thousands of icons ins multiple sizes, which was not really needed for this project.
find `` -type f \! -name "_24_"
Append -delete at the end to delete from the ``
近期下载者：
相关文件：
收藏者：