https://github.com/phphe/mdi-js
Convert Material design icons svg to js and TypeScript.
https://github.com/phphe/mdi-js
Last synced: about 1 month ago
JSON representation
Convert Material design icons svg to js and TypeScript.
- Host: GitHub
- URL: https://github.com/phphe/mdi-js
- Owner: phphe
- Created: 2022-06-06T16:29:22.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-07T04:48:52.000Z (almost 4 years ago)
- Last Synced: 2025-02-28T07:58:52.090Z (about 1 year ago)
- Language: TypeScript
- Size: 925 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mdi-js
Convert Material design icons svg to js and TypeScript.
## Type
```ts
export interface Icon {
attrs: {
xmlns: string;
viewBox: string;
width: string;
height: string;
[key: string]: string;
};
html: string;
}
```
`attrs` are attributes of svg tag. `html` is the code between svg tag.
## Svg example
```svg
```
## Install
```sh
npm install mdi-js
```
## Import
Material design icon has 5 styles: filled, outlined, rounded, sharp, two tone. Check: https://fonts.google.com/icons?selected=Material+Icons:arrow_downward
This library has 6 export points. A default export and 5 style exports. The default export is `filled` style.
An exported icon name is in camel case: `mdiNameStyle`. For `filled` style, suffix is omitted: `mdiName`.
```ts
// Icon is the type of all icons
import { Icon } from "mdi-js";
import { Icon } from "mdi-js/filled";
// imort a icon
import { mdiFace } from "mdi-js";
import { mdiFace } from "mdi-js/filled";
import { mdiFaceOutlined } from "mdi-js/outlined";
import { mdiFaceRound } from "mdi-js/round";
import { mdiFaceSharp } from "mdi-js/sharp";
import { mdiFaceTwotone } from "mdi-js/twotone";
```
## Usage
### Vue Example
```vue
import { mdiFace } from "mdi-svg-converted/filled";
export default {
data() {
return { icon: mdiFace };
},
};
```
## Related
- [Search icon quickly in google fonts](https://fonts.google.com/icons?selected=Material+Icons:arrow_downward&icon.style=Filled)
- [MaterialDesignIcons.com](https://materialdesignicons.com/)
- [https://github.com/Templarian/MaterialDesign](https://github.com/Templarian/MaterialDesign)