更改甜蜜警报中的图标 - Javascript

在Javascript中，我们可以使用一些库来创建甜蜜警报 (sweet alert)。其中，比较常用的是SweetAlert2，它提供了丰富的选项和定制功能。

如果我们想要更改SweetAlert2中默认的警报图标，我们可以按照以下步骤进行：

1. 引入SweetAlert2库的CSS和JS文件。

<!-- 引入SweetAlert2的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.7/dist/sweetalert2.min.css">

<!-- 引入SweetAlert2的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.7/dist/sweetalert2.all.min.js"></script>

2. 创建一个包含警报内容和选项的对象。

const swalWithCustomIcon = Swal.mixin({
  icon: 'your-icon-name', // 更改成你想要的图标名字
  title: '甜蜜警报',
  text: '这是一个甜蜜警报。',
  confirmButtonText: '好的'
})

3. 调用对象的方法，显示警报。

swalWithCustomIcon.fire()

值得注意的是，图标名字可以是SweetAlert2支持的任何图标，详见官方文档。此外，你也可以自己上传并设置自己的图标。

代码片段

<!-- 引入SweetAlert2的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.7/dist/sweetalert2.min.css">

<!-- 引入SweetAlert2的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.7/dist/sweetalert2.all.min.js"></script>

<script>
  const swalWithCustomIcon = Swal.mixin({
    icon: 'your-icon-name', // 更改成你想要的图标名字
    title: '甜蜜警报',
    text: '这是一个甜蜜警报。',
    confirmButtonText: '好的'
  })

  swalWithCustomIcon.fire()
</script>