From 756e9f53a9259a58e06ccfb1d548679412ecf598 Mon Sep 17 00:00:00 2001 From: Opliko Date: Wed, 9 Nov 2022 17:41:37 +0100 Subject: [PATCH] feat(fontawesome): New FontAwesome Icon selector (#11010) * feat: search via FA api in icon picker * feat: new initial icon list * fix: only trigger search if the query changed avoids sending a request for eg. a ctrl key press * fix: change deprecated .click() to .trigger(click) * feat: debounce icon search * fix: use debounce properly --- public/scss/admin/admin.scss | 8 +- public/src/modules/iconSelect.js | 316 +++++++++++- src/views/partials/fontawesome.tpl | 792 +---------------------------- 3 files changed, 301 insertions(+), 815 deletions(-) diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss index 5106629dd7..c76680b1eb 100644 --- a/public/scss/admin/admin.scss +++ b/public/scss/admin/admin.scss @@ -122,13 +122,13 @@ body { .nbb-fa-icons { margin: 0; i { - width: 24px; - height: 24px; + width: 36px; + height: 36px; cursor: pointer; - line-height: 24px; + line-height: 36px; text-align: center; color: $gray-800; - margin: 3px; + margin: 4px; &:hover, &.selected { background: $primary; diff --git a/public/src/modules/iconSelect.js b/public/src/modules/iconSelect.js index 3c7faca380..5ae10c66b8 100644 --- a/public/src/modules/iconSelect.js +++ b/public/src/modules/iconSelect.js @@ -3,11 +3,231 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { const iconSelect = {}; - + const initialIcons = [ + { id: 'nbb-none', label: 'None (NodeBB)', style: 'nodebb' }, + { id: 'youtube', label: 'YouTube (brands)', style: 'brands' }, + { id: 'window-restore', label: 'Window Restore (solid)', style: 'solid' }, + { id: 'window-maximize', label: 'Window Maximize (solid)', style: 'solid' }, + { id: 'rectangle-xmark', label: 'Rectangle X Mark (solid)', style: 'solid' }, + { id: 'triangle-exclamation', label: 'Triangle exclamation (solid)', style: 'solid' }, + { id: 'phone-volume', label: 'Phone Volume (solid)', style: 'solid' }, + { id: 'video', label: 'Video (solid)', style: 'solid' }, + { id: 'address-card', label: 'Address Card (solid)', style: 'solid' }, + { id: 'user', label: 'User (solid)', style: 'solid' }, + { id: 'circle-user', label: 'Circle user (solid)', style: 'solid' }, + { id: 'usb', label: 'USB (brands)', style: 'brands' }, + { id: 'sort', label: 'Sort (solid)', style: 'solid' }, + { id: 'unlock', label: 'unlock (solid)', style: 'solid' }, + { id: 'link-slash', label: 'Link Slash (solid)', style: 'solid' }, + { id: 'trash-can', label: 'Trash can (solid)', style: 'solid' }, + { id: 'transgender', label: 'Transgender (solid)', style: 'solid' }, + { id: 'mars-and-venus', label: 'Mars and Venus (solid)', style: 'solid' }, + { id: 'square-caret-up', label: 'Square caret up (solid)', style: 'solid' }, + { id: 'square-caret-right', label: 'Square caret right (solid)', style: 'solid' }, + { id: 'square-caret-left', label: 'Square caret left (solid)', style: 'solid' }, + { id: 'square-caret-down', label: 'Square caret down (solid)', style: 'solid' }, + { id: 'circle-xmark', label: 'Circle X Mark (solid)', style: 'solid' }, + { id: 'thumbs-up', label: 'thumbs-up (solid)', style: 'solid' }, + { id: 'thumbs-down', label: 'thumbs-down (solid)', style: 'solid' }, + { id: 'thumbtack', label: 'Thumbtack (solid)', style: 'solid' }, + { id: 'temperature-full', label: 'Temperature full (solid)', style: 'solid' }, + { id: 'temperature-three-quarters', label: 'Temperature three quarters (solid)', style: 'solid' }, + { id: 'temperature-half', label: 'Temperature half (solid)', style: 'solid' }, + { id: 'temperature-quarter', label: 'Temperature quarter (solid)', style: 'solid' }, + { id: 'temperature-empty', label: 'Temperature empty (solid)', style: 'solid' }, + { id: 'tv', label: 'Television (solid)', style: 'solid' }, + { id: 'bars-progress', label: 'Bars progress (solid)', style: 'solid' }, + { id: 'gauge-high', label: 'Gauge (solid)', style: 'solid' }, + { id: 'tablet-screen-button', label: 'Tablet screen button (solid)', style: 'solid' }, + { id: 'life-ring', label: 'Life Ring (solid)', style: 'solid' }, + { id: 'sun', label: 'Sun (solid)', style: 'solid' }, + { id: 'circle-stop', label: 'Circle stop (solid)', style: 'solid' }, + { id: 'note-sticky', label: 'Note sticky (solid)', style: 'solid' }, + { id: 'star', label: 'Star (solid)', style: 'solid' }, + { id: 'star-half-stroke', label: 'Star half stroke (solid)', style: 'solid' }, + { id: 'square', label: 'Square (solid)', style: 'solid' }, + { id: 'arrow-down-9-1', label: 'Arrow down 9 1 (solid)', style: 'solid' }, + { id: 'arrow-down-1-9', label: 'Arrow down 1 9 (solid)', style: 'solid' }, + { id: 'sort-down', label: 'Sort Down (Descending) (solid)', style: 'solid' }, + { id: 'sort-up', label: 'Sort Up (Ascending) (solid)', style: 'solid' }, + { id: 'arrow-down-wide-short', label: 'Arrow down wide short (solid)', style: 'solid' }, + { id: 'arrow-down-short-wide', label: 'Arrow down short wide (solid)', style: 'solid' }, + { id: 'arrow-down-z-a', label: 'Arrow down z a (solid)', style: 'solid' }, + { id: 'arrow-down-a-z', label: 'Arrow down a z (solid)', style: 'solid' }, + { id: 'futbol', label: 'Futbol ball (solid)', style: 'solid' }, + { id: 'snowflake', label: 'Snowflake (solid)', style: 'solid' }, + { id: 'face-smile', label: 'Face Smile (solid)', style: 'solid' }, + { id: 'hands', label: 'Hands (solid)', style: 'solid' }, + { id: 'right-from-bracket', label: 'Right from bracket (solid)', style: 'solid' }, + { id: 'right-to-bracket', label: 'Right to bracket (solid)', style: 'solid' }, + { id: 'share-from-square', label: 'Share from square (solid)', style: 'solid' }, + { id: 'paper-plane', label: 'Paper Plane (solid)', style: 'solid' }, + { id: 'floppy-disk', label: 'Floppy Disk (solid)', style: 'solid' }, + { id: 'safari', label: 'Safari (brands)', style: 'brands' }, + { id: 'bath', label: 'Bath (solid)', style: 'solid' }, + { id: 'arrow-rotate-right', label: 'Arrow Rotate Right (solid)', style: 'solid' }, + { id: 'arrow-rotate-left', label: 'Arrow Rotate Left (solid)', style: 'solid' }, + { id: 'bars', label: 'Bars (solid)', style: 'solid' }, + { id: 'xmark', label: 'X Mark (solid)', style: 'solid' }, + { id: 'registered', label: 'Registered Trademark (solid)', style: 'solid' }, + { id: 'arrows-rotate', label: 'Arrows rotate (solid)', style: 'solid' }, + { id: 'circle-question', label: 'Circle question (solid)', style: 'solid' }, + { id: 'square-plus', label: 'Square plus (solid)', style: 'solid' }, + { id: 'circle-play', label: 'Circle play (solid)', style: 'solid' }, + { id: 'chart-pie', label: 'Pie Chart (solid)', style: 'solid' }, + { id: 'image', label: 'Image (solid)', style: 'solid' }, + { id: 'pen-to-square', label: 'Pen to square (solid)', style: 'solid' }, + { id: 'square-pen', label: 'Square pen (solid)', style: 'solid' }, + { id: 'circle-pause', label: 'Circle pause (solid)', style: 'solid' }, + { id: 'opera', label: 'Opera (brands)', style: 'brands' }, + { id: 'openid', label: 'OpenID (brands)', style: 'brands' }, + { id: 'object-ungroup', label: 'Object Ungroup (solid)', style: 'solid' }, + { id: 'object-group', label: 'Object Group (solid)', style: 'solid' }, + { id: 'newspaper', label: 'Newspaper (solid)', style: 'solid' }, + { id: 'graduation-cap', label: 'Graduation Cap (solid)', style: 'solid' }, + { id: 'moon', label: 'Moon (solid)', style: 'solid' }, + { id: 'money-bill-1', label: 'Money bill 1 (solid)', style: 'solid' }, + { id: 'mobile-screen-button', label: 'Mobile screen button (solid)', style: 'solid' }, + { id: 'square-minus', label: 'Square minus (solid)', style: 'solid' }, + { id: 'face-meh', label: 'Face meh (solid)', style: 'solid' }, + { id: 'map', label: 'Map (solid)', style: 'solid' }, + { id: 'location-dot', label: 'Location dot (solid)', style: 'solid' }, + { id: 'reply-all', label: 'reply-all (solid)', style: 'solid' }, + { id: 'reply', label: 'Reply (solid)', style: 'solid' }, + { id: 'share', label: 'Share (solid)', style: 'solid' }, + { id: 'wand-magic-sparkles', label: 'Wand magic sparkles (solid)', style: 'solid' }, + { id: 'up-long', label: 'Up long (solid)', style: 'solid' }, + { id: 'right-long', label: 'Right long (solid)', style: 'solid' }, + { id: 'left-long', label: 'Left long (solid)', style: 'solid' }, + { id: 'down-long', label: 'Down long (solid)', style: 'solid' }, + { id: 'rectangle-list', label: 'Rectangle list (solid)', style: 'solid' }, + { id: 'chart-line', label: 'Line Chart (solid)', style: 'solid' }, + { id: 'lightbulb', label: 'Lightbulb (solid)', style: 'solid' }, + { id: 'turn-up', label: 'Turn up (solid)', style: 'solid' }, + { id: 'turn-down', label: 'Turn down (solid)', style: 'solid' }, + { id: 'lemon', label: 'Lemon (solid)', style: 'solid' }, + { id: 'gavel', label: 'Gavel (solid)', style: 'solid' }, + { id: 'keyboard', label: 'Keyboard (solid)', style: 'solid' }, + { id: 'building-columns', label: 'Building with Columns (solid)', style: 'solid' }, + { id: 'id-card', label: 'Identification Card (solid)', style: 'solid' }, + { id: 'id-badge', label: 'Identification Badge (solid)', style: 'solid' }, + { id: 'hourglass', label: 'Hourglass (solid)', style: 'solid' }, + { id: 'hourglass-end', label: 'Hourglass End (solid)', style: 'solid' }, + { id: 'hourglass-half', label: 'Hourglass Half (solid)', style: 'solid' }, + { id: 'hourglass-start', label: 'Hourglass Start (solid)', style: 'solid' }, + { id: 'bed', label: 'Bed (solid)', style: 'solid' }, + { id: 'hospital', label: 'hospital (solid)', style: 'solid' }, + { id: 'house', label: 'House (solid)', style: 'solid' }, + { id: 'heart', label: 'Heart (solid)', style: 'solid' }, + { id: 'heading', label: 'heading (solid)', style: 'solid' }, + { id: 'hard-drive', label: 'Hard drive (solid)', style: 'solid' }, + { id: 'ear-deaf', label: 'Ear deaf (solid)', style: 'solid' }, + { id: 'handshake', label: 'Handshake (solid)', style: 'solid' }, + { id: 'hand', label: 'Paper (Hand) (solid)', style: 'solid' }, + { id: 'hand-spock', label: 'Spock (Hand) (solid)', style: 'solid' }, + { id: 'hand-scissors', label: 'Scissors (Hand) (solid)', style: 'solid' }, + { id: 'hand-back-fist', label: 'Rock (Hand) (solid)', style: 'solid' }, + { id: 'hand-pointer', label: 'Pointer (Hand) (solid)', style: 'solid' }, + { id: 'hand-peace', label: 'Peace (Hand) (solid)', style: 'solid' }, + { id: 'hand-point-up', label: 'Hand Pointing Up (solid)', style: 'solid' }, + { id: 'hand-point-right', label: 'Hand Pointing Right (solid)', style: 'solid' }, + { id: 'hand-point-left', label: 'Hand Pointing Left (solid)', style: 'solid' }, + { id: 'hand-point-down', label: 'Hand Pointing Down (solid)', style: 'solid' }, + { id: 'hand-lizard', label: 'Lizard (Hand) (solid)', style: 'solid' }, + { id: 'users', label: 'Users (solid)', style: 'solid' }, + { id: 'gears', label: 'Gears (solid)', style: 'solid' }, + { id: 'gear', label: 'Gear (solid)', style: 'solid' }, + { id: 'face-frown', label: 'Face frown (solid)', style: 'solid' }, + { id: 'font-awesome', label: 'Font Awesome (brands)', style: 'brands' }, + { id: 'folder-open', label: 'Folder Open (solid)', style: 'solid' }, + { id: 'folder', label: 'Folder (solid)', style: 'solid' }, + { id: 'bolt', label: 'Bolt (solid)', style: 'solid' }, + { id: 'flag', label: 'flag (solid)', style: 'solid' }, + { id: 'firefox', label: 'Firefox (brands)', style: 'brands' }, + { id: 'copy', label: 'Copy (solid)', style: 'solid' }, + { id: 'file-zipper', label: 'File zipper (solid)', style: 'solid' }, + { id: 'file-video', label: 'Video File (solid)', style: 'solid' }, + { id: 'file-lines', label: 'File lines (solid)', style: 'solid' }, + { id: 'file-audio', label: 'Audio File (solid)', style: 'solid' }, + { id: 'file-image', label: 'Image File (solid)', style: 'solid' }, + { id: 'file', label: 'File (solid)', style: 'solid' }, + { id: 'file-code', label: 'Code File (solid)', style: 'solid' }, + { id: 'eye-dropper', label: 'Eye Dropper (solid)', style: 'solid' }, + { id: 'eye-slash', label: 'Eye Slash (solid)', style: 'solid' }, + { id: 'eye', label: 'Eye (solid)', style: 'solid' }, + { id: 'square-up-right', label: 'Square up right (solid)', style: 'solid' }, + { id: 'up-right-from-square', label: 'Up right from square (solid)', style: 'solid' }, + { id: 'up-right-and-down-left-from-center', label: 'Up right and down left from center (solid)', style: 'solid' }, + { id: 'right-left', label: 'Right left (solid)', style: 'solid' }, + { id: 'envelope-open', label: 'Envelope Open (solid)', style: 'solid' }, + { id: 'envelope', label: 'Envelope (solid)', style: 'solid' }, + { id: 'edge', label: 'Edge Browser (brands)', style: 'brands' }, + { id: 'circle-dot', label: 'Circle dot (solid)', style: 'solid' }, + { id: 'gem', label: 'Gem (solid)', style: 'solid' }, + { id: 'outdent', label: 'Outdent (solid)', style: 'solid' }, + { id: 'utensils', label: 'Utensils (solid)', style: 'solid' }, + { id: 'scissors', label: 'Scissors (solid)', style: 'solid' }, + { id: 'credit-card', label: 'Credit Card (solid)', style: 'solid' }, + { id: 'creative-commons', label: 'Creative Commons (brands)', style: 'brands' }, + { id: 'copyright', label: 'Copyright (solid)', style: 'solid' }, + { id: 'down-left-and-up-right-to-center', label: 'Down left and up right to center (solid)', style: 'solid' }, + { id: 'compass', label: 'Compass (solid)', style: 'solid' }, + { id: 'comments', label: 'comments (solid)', style: 'solid' }, + { id: 'comment-dots', label: 'Comment Dots (solid)', style: 'solid' }, + { id: 'comment', label: 'comment (solid)', style: 'solid' }, + { id: 'code-branch', label: 'Code Branch (solid)', style: 'solid' }, + { id: 'cloud-arrow-up', label: 'Cloud arrow up (solid)', style: 'solid' }, + { id: 'cloud-arrow-down', label: 'Cloud arrow down (solid)', style: 'solid' }, + { id: 'clone', label: 'Clone (solid)', style: 'solid' }, + { id: 'clock', label: 'Clock (solid)', style: 'solid' }, + { id: 'paste', label: 'Paste (solid)', style: 'solid' }, + { id: 'circle', label: 'Circle (solid)', style: 'solid' }, + { id: 'circle-notch', label: 'Circle Notched (solid)', style: 'solid' }, + { id: 'chrome', label: 'Chrome (brands)', style: 'brands' }, + { id: 'square-check', label: 'Square check (solid)', style: 'solid' }, + { id: 'circle-check', label: 'Circle check (solid)', style: 'solid' }, + { id: 'link', label: 'Link (solid)', style: 'solid' }, + { id: 'closed-captioning', label: 'Closed Captioning (solid)', style: 'solid' }, + { id: 'calendar-xmark', label: 'Calendar X Mark (solid)', style: 'solid' }, + { id: 'calendar-plus', label: 'Calendar Plus (solid)', style: 'solid' }, + { id: 'calendar', label: 'Calendar (solid)', style: 'solid' }, + { id: 'calendar-minus', label: 'Calendar Minus (solid)', style: 'solid' }, + { id: 'calendar-check', label: 'Calendar Check (solid)', style: 'solid' }, + { id: 'calendar-days', label: 'Calendar Days (solid)', style: 'solid' }, + { id: 'taxi', label: 'Taxi (solid)', style: 'solid' }, + { id: 'building', label: 'Building (solid)', style: 'solid' }, + { id: 'bookmark', label: 'bookmark (solid)', style: 'solid' }, + { id: 'bluetooth', label: 'Bluetooth (brands)', style: 'brands' }, + { id: 'bell-slash', label: 'Bell Slash (solid)', style: 'solid' }, + { id: 'bell', label: 'bell (solid)', style: 'solid' }, + { id: 'battery-full', label: 'Battery Full (solid)', style: 'solid' }, + { id: 'battery-three-quarters', label: 'Battery 3/4 Full (solid)', style: 'solid' }, + { id: 'battery-half', label: 'Battery 1/2 Full (solid)', style: 'solid' }, + { id: 'battery-quarter', label: 'Battery 1/4 Full (solid)', style: 'solid' }, + { id: 'battery-empty', label: 'Battery Empty (solid)', style: 'solid' }, + { id: 'chart-column', label: 'Chart Column (solid)', style: 'solid' }, + { id: 'car', label: 'Car (solid)', style: 'solid' }, + { id: 'hands-asl-interpreting', label: 'Hands american sign language interpreting (solid)', style: 'solid' }, + { id: 'up-down', label: 'Up down (solid)', style: 'solid' }, + { id: 'left-right', label: 'Left right (solid)', style: 'solid' }, + { id: 'maximize', label: 'Maximize (solid)', style: 'solid' }, + { id: 'up-down-left-right', label: 'Up down left right (solid)', style: 'solid' }, + { id: 'circle-up', label: 'Circle up (solid)', style: 'solid' }, + { id: 'circle-right', label: 'Circle right (solid)', style: 'solid' }, + { id: 'circle-left', label: 'Circle left (solid)', style: 'solid' }, + { id: 'circle-down', label: 'Circle down (solid)', style: 'solid' }, + { id: 'chart-area', label: 'Area Chart (solid)', style: 'solid' }, + { id: 'apple', label: 'Apple (brands)', style: 'brands' }, + { id: 'android', label: 'Android (brands)', style: 'brands' }, + { id: 'address-book', label: 'Address Book (solid)', style: 'solid' }, + ]; iconSelect.init = function (el, onModified) { onModified = onModified || function () {}; - const doubleSize = el.hasClass('fa-2x'); - let selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, ''); + let selected = el.attr('class') + .replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '') + .replace('fa-2x', '') + .replace('fa', '') + .replace(/\s+/g, ''); $('#icons .selected').removeClass('selected'); @@ -19,9 +239,8 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { } } - Benchpress.render('partials/fontawesome', {}).then(function (html) { + Benchpress.render('partials/fontawesome', { icons: initialIcons }).then(function (html) { html = $(html); - html.find('.nbb-fa-icons').prepend($('')); const picker = bootbox.dialog({ onEscape: true, @@ -35,7 +254,7 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { label: 'No Icon', className: 'btn-default', callback: function () { - el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '')); + el.attr('class', 'fa fa-xl'); el.val(''); el.attr('value', ''); @@ -47,12 +266,16 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { className: 'btn-primary', callback: function () { const iconClass = $('.bootbox .selected').attr('class') || `fa fa-${$('.bootbox #fa-filter').val()}`; - const categoryIconClass = $('
').addClass(iconClass).removeClass('fa').removeClass('selected') + const categoryIconClass = $('
') + .addClass(iconClass) + .removeClass('fa') + .removeClass('selected') + .removeClass('fa-xl') .attr('class'); const searchElVal = picker.find('input').val(); if (categoryIconClass) { - el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass); + el.attr('class', 'fa fa-2x ' + categoryIconClass); el.val(categoryIconClass); el.attr('value', categoryIconClass); } else if (searchElVal) { @@ -73,15 +296,17 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { if (selected) { modalEl.find('.' + selected).addClass('selected'); - searchEl.val(selected.replace('fa-', '')); + searchEl.val(selected.replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '').replace('fa-xl', '').replace('fa-', '')); } }).modal('show'); picker.on('shown.bs.modal', function () { const modalEl = $(this); const searchEl = modalEl.find('input'); - const icons = modalEl.find('.nbb-fa-icons i'); + const iconContainer = modalEl.find('.nbb-fa-icons'); + let icons = modalEl.find('.nbb-fa-icons i'); const submitEl = modalEl.find('button.btn-primary'); + let lastSearch = ''; function changeSelection(newSelection) { modalEl.find('i.selected').removeClass('selected'); @@ -100,27 +325,72 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) { searchEl.selectRange(0, searchEl.val().length); modalEl.find('.icon-container').on('click', 'i', function () { - searchEl.val($(this).attr('class').replace('fa fa-', '').replace('selected', '')); + searchEl.val($(this).attr('class') + .replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '') + .replace('fa fa-xl fa-', '') + .replace('selected', '')); changeSelection($(this)); }); - - searchEl.on('keyup', function (e) { - if (e.keyCode !== 13) { - // Filter - icons.show(); - icons.each(function (idx, el) { - if (!el.className.match(new RegExp('^fa fa-.*' + searchEl.val() + '.*$'))) { - $(el).hide(); - } - }); - changeSelection(); + const debouncedSearch = utils.debounce(async () => { + // Search + let iconData; + if (lastSearch.length) { + iconData = await iconSelect.findIcons(lastSearch); } else { - submitEl.click(); + iconData = initialIcons; + } + icons.remove(); + iconData.forEach((iconData) => { + iconContainer.append($(``)); + }); + icons = modalEl.find('.nbb-fa-icons i'); + changeSelection(); + }, 200); + searchEl.on('keyup', function (e) { + if (e.code !== 'Enter' && searchEl.val() !== lastSearch) { + lastSearch = searchEl.val(); + debouncedSearch(); + } else if (e.code === 'Enter') { + submitEl.trigger('click'); } }); }); }); }; + iconSelect.findIcons = async function (searchString) { + const request = await fetch('https://api.fontawesome.com', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query: `query { + search(version: "6.2.0", query: "${searchString}", first: 200) { + id, + label, + familyStylesByLicense { + free { + style + } + } + } + }`, + }), + }); + const response = await request.json(); + const icons = response.data.search.filter(icon => icon.familyStylesByLicense.free.length > 0).flatMap((icon) => { + const result = []; + icon.familyStylesByLicense.free.forEach((style) => { + result.push({ + id: icon.id, + label: `${icon.label} (${style.style})`, + style: style.style, + }); + }); + return result; + }); + return icons; + }; return iconSelect; }); diff --git a/src/views/partials/fontawesome.tpl b/src/views/partials/fontawesome.tpl index 4f4742e2d0..ae9fb96e95 100644 --- a/src/views/partials/fontawesome.tpl +++ b/src/views/partials/fontawesome.tpl @@ -1,796 +1,12 @@
- +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {{{ each icons }}} + + {{{ end }}}

For a full list of icons, please consult: