jorgenvatle/vue-sweetalert-icons

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

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

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

• SweetAlert
• Alexandre Chopin

License

ISC

vue-sweetalert-icons's Issues

v3.2.1 document is not defined

Hey, thanks for this great package! It's great to use just the animated icons of Sweetalert.

Unfortunately, we see an issue when upgrading from v3.2.0 to v.3.2.1:

We do SSR with Nuxtjs.

I quickly tried out the unpublished version v.4.0.0, built the package because there is no dist folder pushed to Github and it seems that might resolve the issue. At least I don't get the error above, only the icons itself are missing. I'm sure the error is on my side, maybe I don't understand how to properly build the package.

How about publishing v4.0.0 to npm and we give it another try?

To reproduce the error try out this PR: Human-Connection/Human-Connection#791

Some minor issues I found in the stylesheet

Hello, I found two problems you may want to look into:

1. There's a typo here, I believe the animation should be pulseInfoIns, not pulseInfogIns
2. This should probably be removed since you're generating prefixes using autoprefixer

Thanks for all your hard work!

be able to set the size will be better than

i'm a back-end and i'm not so good at front-end, i have clone the code and trying to change the width, height and etc.., but it's not work, please tell me how can i change the size, thanks!

Could not find a declaration file

Hello, beautiful pack with icons for the vue, I wanted to import it into the project, but I encountered the following error: Could not find a declaration file for module 'vue-sweetalert-icons'.
On the project we use typescript, which requires the declaration file (.d.ts)
I tried to use require instead of import, but to no avail