Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Install

npm install --save vue-sweetalert-icons

Import

import SweetAlertIcons from 'vue-sweetalert-icons';

Vue.use(SweetAlertIcons);

If you're using Nuxt, you might need additional steps (read more)

Use

<template>
    <!-- Icon can be one of: "success", "warning", "info", "error" and "loading" -->
    <sweetalert-icon icon="success" />

    <!-- Optionally, you can customize colors for all icons! 🎨 -->
    <sweetalert-icon icon="warning" color="#6a737d"/>
</template>

Alternative Usage

If you'd rather not use the package globally, you can import SweetalertIcon for use with a single vue component/instance instead:

<template>
    <sweetalert-icon icon="success"></sweetalert-icon>
</template>

<script>
    import SweetalertIcon from 'vue-sweetalert-icons';

    export default {
        components: { SweetalertIcon },
    }
</script>

Usage with Nuxt

Due to an issue with the way styles are injected into Nuxt, please wrap <sweetalert-icon /> around <no-ssr> tags.

<no-ssr>
    <sweetalert-icon icon="info" />
</no-ssr>

Credits

• SweetAlert
• Alexandre Chopin

License

ISC