Editing Font Awesome new NET牛人

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Font Awesome new</title>
</head>

<body>

    <select>
        <option>solid</option>
        <option>regular</option>
        <option>brands</option>
    </select>

    <ul></ul>

    <div></div>

</body>

</html>

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul li {
    float: left;
    width: 200px;
    margin: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
ul li:hover {
    overflow: initial;
}

svg {
    height: 1.5rem;
    max-width: 1.5rem;
    margin-right: 15px;
    vertical-align: middle;
}

svg:hover {
    fill: orange;
    transition: transform 1.5s;
    transform: rotate(360deg);
}

function faView(type) {
    var url = `https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/font-awesome/6.0.0/sprites/${type}.svg`
    fetch(url).then(x => x.text()).then(res => {
        var div = document.querySelector('div');
        div.innerHTML = res;
        document.body.appendChild(div);

        var ul = document.querySelector('ul');
        ul.innerHTML = "";
        document.querySelectorAll('symbol').forEach(item => {
            var li = document.createElement("li");
            li.title = item.id;
            li.innerHTML = `<svg><use xlink:href="#${item.id}"></use></svg>${item.id}`;
            ul.appendChild(li);
        });
    })
}
document.querySelector('select').onchange = function () {
    faView(this.value);
}
faView(document.querySelector('select').value);

document.onclick = function (e) {
    var target = e.target;
    document.querySelectorAll('li').forEach(li => {
        if (li.contains(target)) {
            console.log(li, li.title)
            navigator.clipboard.writeText(li.title)
        }
    })
}