Sweetalert 2 图标问题

Question

有人可以帮助我吗？ 我尝试在我的应用程序上使用 sweetalert2，但如果使用“问题”、“警告”和“信息”，则这是不正确的。 来源：https://sweetalert2.github.io/

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
    function deleteConfirmation(id) {
        var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
        
        Swal.fire({
            title: 'Peringatan',
            text: "Anda yakin ingin menghapus data?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                // redirect to delete data
                location.replace(urlsite);
                // notification
                Swal.fire(
                    'Sukses!',
                    'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
                    'success'
                )
            } else {
                // cancel to deleting data
                Swal.fire(
                    'Batal Hapus!',
                    'Data Anda batal dihapus!',
                    'error'
                )
            }
        })
    }
</script>

Answer 1

根据您的 Sweetalert 版本，设置图标的属性可以称为“图标”或“类型”，请尝试两者。如果没有看到您的代码，就无法做更多事情。

Answer 2

尝试使用选项

Swal.fire({
    title: 'Batal Hapus',
    text: 'Data Anda batal dihapus!',
    icon: 'error',
})

根据文档https://sweetalert2.github.io/

Answer 3

您可以使用自定义类来隐藏其中一个图标。有些图标的内容位于

::before

伪类中，该类会加倍。

创建自定义类

.no-before-icon::before {
    display: none !important;
}

将其应用于所有图标 - 不会影响成功或错误图标

Swal.fire({
     title: "No more double icons",
     icon: "info",
     customClass: {
        icon: "no-before-icon",
    },
});

Answer 4

尝试这个版本，它对我有用：

sweetalert2：14.4.11

Answer 5

如果只包含 JS 文件而不包含 CSS 文件，那就完美了。