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!
目前為
// ==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();
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址