Skip to content

🎨 Clean animated status icons for your Vue project. Based on SweetAlert's status icons

License

Notifications You must be signed in to change notification settings

JorgenVatle/vue-sweetalert-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Example usage

Install

Vue v3

npm install vue-sweetalert-icons

Vue v2

npm install vue-sweetalert-icons@4

Import

import SweetAlertIcons from 'vue-sweetalert-icons';

// For Vue v3, you also need to import styles explicitly:
import 'vue-sweetalert-icons/dist/style.css'

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';
    
    // For Vue v3, make sure you've imported the styles somewhere in your app as well.
    // import 'vue-sweetalert-icons/dist/style.css'
    
    export default {
        components: { SweetalertIcon },
    }
</script>

Usage with Nuxt 2

Due to an issue with the way styles are injected into Nuxt, please wrap <sweetalert-icon /> around <no-ssr> tags. If you're using Nuxt 3, this step is no longer necessary.

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

Credits

License

ISC

About

🎨 Clean animated status icons for your Vue project. Based on SweetAlert's status icons

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published