利用阿里图库中的星期几图标，在网页显示今天是星期几的图片

本篇将介绍如何将阿里巴巴矢量图标库的图标在网页中显示今天是星期几

阿里巴巴矢量图标库的图标一般可通过一下方式下载，同样我们也有很多方式来引用里面的图标，例如下载图片，直接通过图片导入
但是我们今天介绍的是如何通过svg代码来直接导入，这个方法很简单，我们只需要负责它的svg代码即可，无需下载图片

1.首先我们在HTML文件中划定好一个区域，用来展示今天是星期几

其中id为weekday-icon是用来展示图标的
我们为其写一个样式

#content {text-align: center;background: white;padding: 2rem;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}

2.新建一个对象，用来存储对应的svg，用每个星期对应的数字来作为键，这样可以很方便的调用

因为在编程语言中，星期天代表0，星期一代表1，以此类推

3.新建Date对象来获取今天是星期几所对应的数字

const today = new Date();
const dayOfWeek = today.getDay();

4.最后我们获取到div，并通过对象的调用来让我们图标渲染到页面中
document.getElementById('weekday-icon').innerHTML = svgIcons[dayOfWeek];

例如，今天是星期天，那么dayOfWeek所获取的数字就是0，svgIcons对象调用0所返回的就是键为0所对应的图标

查看效果