@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:

1. Add SVG files to packages/icons-svg/svg/ in the appropriate directory (outline/fill/color)
2. Run the generation script:

   cd packages/icons-svg
   npm run generate:components

3. Build the package:

   cd packages/icons-vue
   npm run build

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