Package Exports

melon-icons-vue
melon-icons-vue/dist/melon-icons-vue.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (melon-icons-vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@melon-js/icons-vue

Vue 2 implementation of Melon Icons.

Installation

npm install @melon-js/icons-vue

Usage

Global Registration

import Vue from 'vue';
import MelonIcons from '@melon-js/icons-vue';

Vue.use(MelonIcons);

<template>
  <div>
    <MAccountBookIcon />
    <MAlertIcon :spin="true" />
  </div>
</template>

Local Registration

<template>
  <div>
    <AccountBookIconComponent />
    <AlertIconComponent :spin="true" />
  </div>
</template>

<script>
import { AccountBookIconComponent, AlertIconComponent } from '@melon-js/icons-vue';

export default {
  components: {
    AccountBookIconComponent,
    AlertIconComponent
  }
};
</script>

Direct Icon Usage

<template>
  <div>
    <Icon :icon="AccountBookIcon" />
    <Icon :icon="AlertIcon" :spin="true" />
  </div>
</template>

<script>
import { Icon, AccountBookIcon, AlertIcon } from '@melon-js/icons-vue';

export default {
  components: {
    Icon
  },
  data() {
    return {
      AccountBookIcon,
      AlertIcon
    };
  }
};
</script>

Props

All icons support the following props:

Prop	Type	Description
spin	boolean	Whether to spin the icon
viewBox	string	SVG viewBox (default: '0 0 1024 1024')

Additional attributes will be passed to the underlying SVG element.

Adding New Icons

To add new icons to this package:

Add SVG files to packages/icons-svg/svg/ in the appropriate directory (outline/fill/color)

Run the generation script:

cd packages/icons-svg
npm run generate:components

Build the package:
```
cd packages/icons-vue
npm run build
```

This will automatically generate new Vue 2 components for the added SVG files.