# fluenticons

Fluent Icons CSS library and JavaScript library.

[Fluent Icons](https://wpmore.cn/resources/fluenticons/)

## Include CSS and font

Copy all files under `dist/style` folder to your project, such as `fluenticons` folder. 

```html
<link rel="stylesheet" type="text/css" href="fluenticons/fluenticons.css" />
```

Mark the html code to display, for example: 

```html
<i class="fluent-icon fluent-icon-ic_fluent_access_time_24_filled"></i>
```

All font icons can be viewed in `dist/style/fluenticons.html`. 

## Include JavaScript

Import the files you need from `dist/js`:

```bash
esm: 'dist/js/fluenticons.esm.js', // ES module for bundlers exposing `export const iconName = '<svg...'`
cjs: 'dist/js/fluenticons.js', // CommonJS for Node exposing `module.exports = { iconName: '<svg...' }`
esmx: 'dist/js/fluenticons.esm.jsx', // JSX ES module, exposing React components with `export`
cjsx: 'dist/js/fluenticons.cjs.jsx', // JSX CommonJS, exposing React components with `module.exports`
iife: 'dist/js/fluenticons.min.js', // Self executing <script>, exposing all icons as symbols on page,
dts: 'dist/js/fluenticons.d.ts', // Exposes typescript definitions with `export declare const`
dtsx: 'dist/js/fluenticons-jsx.d.ts' // Exposes typescript definitions for JSX with `export declare const`
```

## More references

[microsoft/fluentui-system-icons: Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft. (github.com)](https://github.com/microsoft/fluentui-system-icons)

[fayazara/fluenticons: 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. (github.com)](https://github.com/fayazara/fluenticons)

[fantasticon - npm (npmjs.com)](https://www.npmjs.com/package/fantasticon)

[@nrk/svg-to-js - npm (npmjs.com)](https://www.npmjs.com/package/@nrk/svg-to-js)