Font Awesome Pro Icons SVG Downloader

Replaces "Pro" tags with download links and adds a "Download All" button on the Font Awesome website. Automatically handles dynamically added icons and removes comments from SVGs before download. Save time by easily downloading all icons in bulk!
安装此脚本 ?
访问作者的支持站点，提问、发表评价，或者举报此脚本。
Wrap lines
// ==UserScript==
// @name         Font Awesome Pro Icons SVG Downloader
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Replaces "Pro" tags with download links and adds a "Download All" button on the Font Awesome website. Automatically handles dynamically added icons and removes comments from SVGs before download. Save time by easily downloading all icons in bulk!
// @author       Sami
// @match        https://fontawesome.com/*
// @grant        none
// @run-at       document-end
// @homepageURL  https://github.com/themrsami
// @supportURL   https://github.com/themrsami
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // Function to fetch SVG content, clean it from comments, and trigger a download
    async function downloadSVG(url, filename) {
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error('Network response was not ok.');
            }
            let svgContent = await response.text();

            // Remove comments from the SVG content
            svgContent = svgContent.replace(/<!--[\s\S]*?-->/g, '');

            const a = document.createElement('a');
            a.href = URL.createObjectURL(new Blob([svgContent], { type: 'image/svg+xml' }));
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        } catch (error) {
            console.error('Failed to download SVG:', error);
            alert('Failed to download some SVG files. Check the console for details.');
        }
    }

    // Function to get the selected Font Awesome version
    function getSelectedVersion() {
        const selectElement = document.getElementById('choose_aversionoffontawesome');
        return selectElement ? selectElement.value.trim() : '6.6.0';
    }

    // Function to replace "Pro" text with a download link
    function replaceProWithDownload() {
        const version = getSelectedVersion();
        const icons = document.querySelectorAll('article.wrap-icon');

        icons.forEach((icon) => {
            const proTag = icon.querySelector('.tag');
            const iconElement = icon.querySelector('i');
            const iconName = icon.querySelector('.icon-name')?.textContent.trim();

            if (proTag && proTag.textContent.includes('Pro') && iconElement) {
                const classes = Array.from(iconElement.classList);
                const relevantClasses = classes.filter(c => c !== 'fa-fw' && c.startsWith('fa-'));

                let iconStyle = '';
                let combinedStyle = '';

                // Check for duotone, sharp, and sharp-duotone, and combine if necessary
                if (relevantClasses.includes('fa-duotone')) {
                    combinedStyle += 'duotone';
                }
                if (relevantClasses.includes('fa-sharp')) {
                    combinedStyle += (combinedStyle ? '-' : '') + 'sharp';
                }
                if (relevantClasses.includes('fa-sharp-duotone')) {
                    combinedStyle += (combinedStyle ? '-' : '') + 'sharp-duotone';
                }

                // Check for solid, light, thin, regular, and use them separately if no combination is needed
                if (combinedStyle) {
                    if (relevantClasses.includes('fa-solid')) {
                        combinedStyle += '-solid';
                    } else if (relevantClasses.includes('fa-light')) {
                        combinedStyle += '-light';
                    } else if (relevantClasses.includes('fa-thin')) {
                        combinedStyle += '-thin';
                    } else if (relevantClasses.includes('fa-regular')) {
                        combinedStyle += '-regular';
                    }
                    iconStyle = combinedStyle;
                } else {
                    if (relevantClasses.includes('fa-solid')) {
                        iconStyle = 'solid';
                    } else if (relevantClasses.includes('fa-light')) {
                        iconStyle = 'light';
                    } else if (relevantClasses.includes('fa-thin')) {
                        iconStyle = 'thin';
                    } else if (relevantClasses.includes('fa-regular')) {
                        iconStyle = 'regular';
                    }
                }

                // Replace the existing "Pro" tag with the download text and icon
                proTag.innerHTML = `
                    <span class="fa-download-tag">
                        ↓
                        <span class="fa-download-text">Download</span>
                    </span>
                `;
                // Style the new content to look like a clickable link
                proTag.classList.add('fa-download-pro');

                // Construct the URL and filename
                const url = `https://site-assets.fontawesome.com/releases/v${version}/svgs/${iconStyle}/${iconName}.svg`;
                const filename = `${iconName}.svg`;

                proTag.addEventListener('click', () => downloadSVG(url, filename));
            }
        });
    }

    // Function to set up a MutationObserver
    function setupMutationObserver() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    replaceProWithDownload();
                }
            });
        });

        // Start observing the document body for changes
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // Function to create the "Download All" button
    function createDownloadAllButton() {
        const existingButton = document.getElementById('download-all-button');
        if (existingButton) return; // Avoid creating multiple buttons

        const button = document.createElement('button');
        button.id = 'download-all-button';
        button.innerHTML = `
            <span class="fa-download-all-button">
                ↓ Download All
            </span>
        `;

        // Add click event to download all SVGs
        button.addEventListener('click', () => {
            const downloadButtons = document.querySelectorAll('article.wrap-icon .tag');
            downloadButtons.forEach((tag) => {
                if (tag.textContent.includes('Download')) {
                    tag.click();
                }
            });
        });

        document.body.appendChild(button);
    }

    // Adding some CSS to style the elements
    const style = document.createElement('style');
    style.textContent = `
        .fa-download-tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 4px;
            border-radius: 4px;
            background-color: var(--fa-yellow);
            color: var(--fa-navy);
            cursor: pointer;
            font-size: 12px;
            text-align: center;
        }
        .fa-download-text {
            margin-left: 4px;
        }
        .fa-download-pro {
            display: inline-block;
        }
        .fa-download-all-button {
            display: inline-flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 12px;
            background-color: var(--fa-yellow);
            color: var(--fa-navy);
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            border: none;
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;
        }
    `;
    document.head.appendChild(style);

    // Run the initial replacement and set up the observer
    replaceProWithDownload();
    setupMutationObserver();
    createDownloadAllButton();
})();
欢迎访问Greasy Fork镜像
