Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iprit/md-svg-vue
Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)
https://github.com/iprit/md-svg-vue
bundling chunking icons inline-svg material-design server-side-rendering svg svg-icons vue vuejs2
Last synced: 4 months ago
JSON representation
Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)
- Host: GitHub
- URL: https://github.com/iprit/md-svg-vue
- Owner: IPRIT
- License: mit
- Created: 2018-01-17T13:57:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-11-20T17:02:50.000Z (about 2 years ago)
- Last Synced: 2024-04-25T02:41:43.009Z (9 months ago)
- Topics: bundling, chunking, icons, inline-svg, material-design, server-side-rendering, svg, svg-icons, vue, vuejs2
- Language: JavaScript
- Homepage:
- Size: 1010 KB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Design Icons by Google for Vue.js & Nuxt.js (inline SVG with path)
This library should grant an easy-to-use interface to icons from Material Design.
Advantages of this module in comparing to fonts, svg sprites, etc.
1. Instead of importing all icons to your application you can simply import only necessary icons what you only need.
2. Decrease a huge amount of bytes cause you no need to load fonts or something else.
3. You will see your icon on the site right away after server side rendering cause server renders icon as inline svg with only one path.
4. Great performance cause icons built on top of Vue functional components.
5. You can extend existing iconset with your icons. Just clone this repo and load your icons (each icon in separate svg file) to corresponding path.
This project could not have been possible without [BrowserStack](https://www.browserstack.com/).
]
## How to use
Simply install it using npm or yarn:
```
npm install --save md-svg-vue
```
or
```
yarn add md-svg-vue
```
### Import and usage
Simply import the icon you wish to use to your vue project with the CommonJS syntax like in the following examples:
```js
var MdClose = require('md-svg-vue/dist/action/MdClose');
// or
import MdClose from 'md-svg-vue/dist/action/MdClose';
```
***Common structure of import paths:***
```js
import MdIcon from 'md-svg-vue/dist//.vue'
```
where
* namespace - Google Material Icons namespace (e.g.: action, alert, av, content, communication, etc.)
* icon-name - Vue component with Icon (MdClose, MdBluetoothSearching)
Then you need to import the icon to your Vue component:
```js
props: {
// ...
},
components: {
MdClose,
MdBluetoothSearching,
MdAttachMoney
}
```
The naming syntax of these components is `md-`.
Example.vue:
```vue
```
or
```vue
```
or
```vue
Searching...
```
And after rendering the icon component you will see resulting html:
```html
```
## Used resources
- [Material Design Icons by Google](https://material.io/tools/icons)
- [Material Design Icons by Google (Github sources)](https://github.com/google/material-design-icons/)
- [Vue.js](https://vuejs.org/)