diff --git a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js index decc6681803..ef60571cec3 100644 --- a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js +++ b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js @@ -1,8 +1,6 @@ import I18n from "I18n"; import { h } from "virtual-dom"; import attributeHook from "discourse-common/lib/attribute-hook"; -import deprecated from "discourse-common/lib/deprecated"; -import jQuery from "jquery"; const SVG_NAMESPACE = "http://www.w3.org/2000/svg"; let _renderers = []; @@ -43,474 +41,6 @@ const REPLACEMENTS = { "notification.membership_request_consolidated": "users" }; -// TODO: use lib/svg_sprite/fa4-renames.json here -// Note: these should not be edited manually. They define the fa4-fa5 migration -const fa4Replacements = { - "500px": "fab-500px", - "address-book-o": "far-address-book", - "address-card-o": "far-address-card", - adn: "fab-adn", - amazon: "fab-amazon", - android: "fab-android", - angellist: "fab-angellist", - apple: "fab-apple", - "area-chart": "chart-area", - "arrow-circle-o-down": "far-arrow-alt-circle-down", - "arrow-circle-o-left": "far-arrow-alt-circle-left", - "arrow-circle-o-right": "far-arrow-alt-circle-right", - "arrow-circle-o-up": "far-arrow-alt-circle-up", - arrows: "arrows-alt", - "arrows-alt": "expand-arrows-alt", - "arrows-h": "arrows-alt-h", - "arrows-v": "arrows-alt-v", - "asl-interpreting": "american-sign-language-interpreting", - automobile: "car", - bandcamp: "fab-bandcamp", - bank: "university", - "bar-chart": "far-chart-bar", - "bar-chart-o": "far-chart-bar", - bathtub: "bath", - battery: "battery-full", - "battery-0": "battery-empty", - "battery-1": "battery-quarter", - "battery-2": "battery-half", - "battery-3": "battery-three-quarters", - "battery-4": "battery-full", - behance: "fab-behance", - "behance-square": "fab-behance-square", - "bell-o": "far-bell", - "bell-slash-o": "far-bell-slash", - bitbucket: "fab-bitbucket", - "bitbucket-square": "fab-bitbucket", - bitcoin: "fab-btc", - "black-tie": "fab-black-tie", - bluetooth: "fab-bluetooth", - "bluetooth-b": "fab-bluetooth-b", - "bookmark-o": "far-bookmark", - btc: "fab-btc", - "building-o": "far-building", - buysellads: "fab-buysellads", - cab: "taxi", - calendar: "calendar-alt", - "calendar-check-o": "far-calendar-check", - "calendar-minus-o": "far-calendar-minus", - "calendar-o": "far-calendar", - "calendar-plus-o": "far-calendar-plus", - "calendar-times-o": "far-calendar-times", - "caret-square-o-down": "far-caret-square-down", - "caret-square-o-left": "far-caret-square-left", - "caret-square-o-right": "far-caret-square-right", - "caret-square-o-up": "far-caret-square-up", - cc: "far-closed-captioning", - "cc-amex": "fab-cc-amex", - "cc-diners-club": "fab-cc-diners-club", - "cc-discover": "fab-cc-discover", - "cc-jcb": "fab-cc-jcb", - "cc-mastercard": "fab-cc-mastercard", - "cc-paypal": "fab-cc-paypal", - "cc-stripe": "fab-cc-stripe", - "cc-visa": "fab-cc-visa", - chain: "link", - "chain-broken": "unlink", - "check-circle-o": "far-check-circle", - "check-square-o": "far-check-square", - chrome: "fab-chrome", - "circle-o": "far-circle", - "circle-o-notch": "circle-notch", - "circle-thin": "far-circle", - clipboard: "far-clipboard", - "clock-o": "far-clock", - clone: "far-clone", - close: "times", - "cloud-download": "cloud-download-alt", - "cloud-upload": "cloud-upload-alt", - cny: "yen-sign", - "code-fork": "code-branch", - codepen: "fab-codepen", - codiepie: "fab-codiepie", - "comment-o": "far-comment", - commenting: "far-comment-dots", - "commenting-o": "far-comment-dots", - "comments-o": "far-comments", - compass: "far-compass", - connectdevelop: "fab-connectdevelop", - contao: "fab-contao", - copyright: "far-copyright", - "creative-commons": "fab-creative-commons", - "credit-card": "far-credit-card", - "credit-card-alt": "credit-card", - css3: "fab-css3", - cutlery: "utensils", - dashboard: "tachometer-alt", - dashcube: "fab-dashcube", - deafness: "deaf", - dedent: "outdent", - delicious: "fab-delicious", - deviantart: "fab-deviantart", - diamond: "far-gem", - digg: "fab-digg", - discord: "fab-discord", - dollar: "dollar-sign", - "dot-circle-o": "far-dot-circle", - dribbble: "fab-dribbble", - "drivers-license": "id-card", - "drivers-license-o": "far-id-card", - dropbox: "fab-dropbox", - drupal: "fab-drupal", - edge: "fab-edge", - eercast: "fab-sellcast", - empire: "fab-empire", - "envelope-o": "far-envelope", - "envelope-open-o": "far-envelope-open", - envira: "fab-envira", - etsy: "fab-etsy", - eur: "euro-sign", - euro: "euro-sign", - exchange: "exchange-alt", - expeditedssl: "fab-expeditedssl", - "external-link": "external-link-alt", - "external-link-square": "external-link-square-alt", - eye: "far-eye", - "eye-slash": "far-eye-slash", - eyedropper: "eye-dropper", - fa: "fab-font-awesome", - facebook: "fab-facebook-f", - "facebook-f": "fab-facebook-f", - "facebook-official": "fab-facebook", - "facebook-square": "fab-facebook-square", - feed: "rss", - "file-archive-o": "far-file-archive", - "file-audio-o": "far-file-audio", - "file-code-o": "far-file-code", - "file-excel-o": "far-file-excel", - "file-image-o": "far-file-image", - "file-movie-o": "far-file-video", - "file-o": "far-file", - "file-pdf-o": "far-file-pdf", - "file-photo-o": "far-file-image", - "file-picture-o": "far-file-image", - "file-powerpoint-o": "far-file-powerpoint", - "file-sound-o": "far-file-audio", - "file-text": "file-alt", - "file-text-o": "far-file-alt", - "file-video-o": "far-file-video", - "file-word-o": "far-file-word", - "file-zip-o": "far-file-archive", - "files-o": "far-copy", - firefox: "fab-firefox", - "first-order": "fab-first-order", - "flag-o": "far-flag", - flash: "bolt", - flickr: "fab-flickr", - "floppy-o": "far-save", - "folder-o": "far-folder", - "folder-open-o": "far-folder-open", - "font-awesome": "fab-font-awesome", - fonticons: "fab-fonticons", - "fort-awesome": "fab-fort-awesome", - forumbee: "fab-forumbee", - foursquare: "fab-foursquare", - "free-code-camp": "fab-free-code-camp", - "frown-o": "far-frown", - "futbol-o": "far-futbol", - gbp: "pound-sign", - ge: "fab-empire", - gear: "cog", - gears: "cogs", - "get-pocket": "fab-get-pocket", - gg: "fab-gg", - "gg-circle": "fab-gg-circle", - git: "fab-git", - "git-square": "fab-git-square", - github: "fab-github", - "github-alt": "fab-github-alt", - "github-square": "fab-github-square", - gitlab: "fab-gitlab", - gittip: "fab-gratipay", - glass: "glass-martini", - glide: "fab-glide", - "glide-g": "fab-glide-g", - google: "fab-google", - "google-plus": "fab-google-plus-g", - "google-plus-circle": "fab-google-plus", - "google-plus-official": "fab-google-plus", - "google-plus-square": "fab-google-plus-square", - "google-wallet": "fab-google-wallet", - gratipay: "fab-gratipay", - grav: "fab-grav", - group: "users", - "hacker-news": "fab-hacker-news", - "hand-grab-o": "far-hand-rock", - "hand-lizard-o": "far-hand-lizard", - "hand-o-down": "far-hand-point-down", - "hand-o-left": "far-hand-point-left", - "hand-o-right": "far-hand-point-right", - "hand-o-up": "far-hand-point-up", - "hand-paper-o": "far-hand-paper", - "hand-peace-o": "far-hand-peace", - "hand-pointer-o": "far-hand-pointer", - "hand-rock-o": "far-hand-rock", - "hand-scissors-o": "far-hand-scissors", - "hand-spock-o": "far-hand-spock", - "hand-stop-o": "far-hand-paper", - "handshake-o": "far-handshake", - "hard-of-hearing": "deaf", - "hdd-o": "far-hdd", - header: "heading", - "heart-o": "far-heart", - "hospital-o": "far-hospital", - hotel: "bed", - "hourglass-1": "hourglass-start", - "hourglass-2": "hourglass-half", - "hourglass-3": "hourglass-end", - "hourglass-o": "far-hourglass", - houzz: "fab-houzz", - html5: "fab-html5", - "id-card-o": "far-id-card", - ils: "shekel-sign", - image: "far-image", - imdb: "fab-imdb", - inr: "rupee-sign", - instagram: "fab-instagram", - institution: "university", - "internet-explorer": "fab-internet-explorer", - intersex: "transgender", - ioxhost: "fab-ioxhost", - joomla: "fab-joomla", - jpy: "yen-sign", - jsfiddle: "fab-jsfiddle", - "keyboard-o": "far-keyboard", - krw: "won-sign", - lastfm: "fab-lastfm", - "lastfm-square": "fab-lastfm-square", - leanpub: "fab-leanpub", - legal: "gavel", - "lemon-o": "far-lemon", - "level-down": "level-down-alt", - "level-up": "level-up-alt", - "life-bouy": "far-life-ring", - "life-buoy": "far-life-ring", - "life-ring": "far-life-ring", - "life-saver": "far-life-ring", - "lightbulb-o": "far-lightbulb", - "line-chart": "chart-line", - linkedin: "fab-linkedin-in", - "linkedin-square": "fab-linkedin", - linode: "fab-linode", - linux: "fab-linux", - "list-alt": "far-list-alt", - "long-arrow-down": "long-arrow-alt-down", - "long-arrow-left": "long-arrow-alt-left", - "long-arrow-right": "long-arrow-alt-right", - "long-arrow-up": "long-arrow-alt-up", - "mail-forward": "share", - "mail-reply": "reply", - "mail-reply-all": "reply-all", - "map-marker": "map-marker-alt", - "map-o": "far-map", - maxcdn: "fab-maxcdn", - meanpath: "fab-font-awesome", - medium: "fab-medium", - meetup: "fab-meetup", - "meh-o": "far-meh", - "minus-square-o": "far-minus-square", - mixcloud: "fab-mixcloud", - mobile: "mobile-alt", - "mobile-phone": "mobile-alt", - modx: "fab-modx", - money: "far-money-bill-alt", - "moon-o": "far-moon", - "mortar-board": "graduation-cap", - navicon: "bars", - "newspaper-o": "far-newspaper", - "object-group": "far-object-group", - "object-ungroup": "far-object-ungroup", - odnoklassniki: "fab-odnoklassniki", - "odnoklassniki-square": "fab-odnoklassniki-square", - opencart: "fab-opencart", - openid: "fab-openid", - opera: "fab-opera", - "optin-monster": "fab-optin-monster", - pagelines: "fab-pagelines", - "paper-plane-o": "far-paper-plane", - paste: "far-clipboard", - patreon: "fab-patreon", - "pause-circle-o": "far-pause-circle", - paypal: "fab-paypal", - pencil: "pencil-alt", - "pencil-square": "pen-square", - "pencil-square-o": "far-edit", - photo: "far-image", - "picture-o": "far-image", - "pie-chart": "chart-pie", - "pied-piper": "fab-pied-piper", - "pied-piper-alt": "fab-pied-piper-alt", - "pied-piper-pp": "fab-pied-piper-pp", - pinterest: "fab-pinterest", - "pinterest-p": "fab-pinterest-p", - "pinterest-square": "fab-pinterest-square", - "play-circle-o": "far-play-circle", - "plus-square-o": "far-plus-square", - "product-hunt": "fab-product-hunt", - qq: "fab-qq", - "question-circle-o": "far-question-circle", - quora: "fab-quora", - ra: "fab-rebel", - ravelry: "fab-ravelry", - rebel: "fab-rebel", - reddit: "fab-reddit", - "reddit-alien": "fab-reddit-alien", - "reddit-square": "fab-reddit-square", - refresh: "sync", - registered: "far-registered", - remove: "times", - renren: "fab-renren", - reorder: "bars", - repeat: "redo", - resistance: "fab-rebel", - rmb: "yen-sign", - "rotate-left": "undo", - "rotate-right": "redo", - rouble: "ruble-sign", - rub: "ruble-sign", - ruble: "ruble-sign", - rupee: "rupee-sign", - s15: "bath", - safari: "fab-safari", - scissors: "cut", - scribd: "fab-scribd", - sellsy: "fab-sellsy", - send: "paper-plane", - "send-o": "far-paper-plane", - "share-square-o": "far-share-square", - shekel: "shekel-sign", - sheqel: "shekel-sign", - shield: "shield-alt", - shirtsinbulk: "fab-shirtsinbulk", - "sign-in": "sign-in-alt", - "sign-out": "sign-out-alt", - signing: "sign-language", - simplybuilt: "fab-simplybuilt", - skyatlas: "fab-skyatlas", - skype: "fab-skype", - slack: "fab-slack", - sliders: "sliders-h", - slideshare: "fab-slideshare", - "smile-o": "far-smile", - snapchat: "fab-snapchat", - "snapchat-ghost": "fab-snapchat-ghost", - "snapchat-square": "fab-snapchat-square", - "snowflake-o": "far-snowflake", - "soccer-ball-o": "far-futbol", - "sort-alpha-asc": "sort-alpha-down", - "sort-alpha-desc": "sort-alpha-up", - "sort-amount-asc": "sort-amount-down", - "sort-amount-desc": "sort-amount-up", - "sort-asc": "sort-up", - "sort-desc": "sort-down", - "sort-numeric-asc": "sort-numeric-down", - "sort-numeric-desc": "sort-numeric-up", - soundcloud: "fab-soundcloud", - spoon: "utensil-spoon", - spotify: "fab-spotify", - "square-o": "far-square", - "stack-exchange": "fab-stack-exchange", - "stack-overflow": "fab-stack-overflow", - "star-half-empty": "far-star-half", - "star-half-full": "far-star-half", - "star-half-o": "far-star-half", - "star-o": "far-star", - steam: "fab-steam", - "steam-square": "fab-steam-square", - "sticky-note-o": "far-sticky-note", - "stop-circle-o": "far-stop-circle", - stumbleupon: "fab-stumbleupon", - "stumbleupon-circle": "fab-stumbleupon-circle", - "sun-o": "far-sun", - superpowers: "fab-superpowers", - support: "far-life-ring", - tablet: "tablet-alt", - tachometer: "tachometer-alt", - telegram: "fab-telegram", - television: "tv", - "tencent-weibo": "fab-tencent-weibo", - themeisle: "fab-themeisle", - thermometer: "thermometer-full", - "thermometer-0": "thermometer-empty", - "thermometer-1": "thermometer-quarter", - "thermometer-2": "thermometer-half", - "thermometer-3": "thermometer-three-quarters", - "thermometer-4": "thermometer-full", - "thumb-tack": "thumbtack", - "thumbs-o-down": "far-thumbs-down", - "thumbs-o-up": "far-thumbs-up", - ticket: "ticket-alt", - "times-circle-o": "far-times-circle", - "times-rectangle": "window-close", - "times-rectangle-o": "far-window-close", - "toggle-down": "far-caret-square-down", - "toggle-left": "far-caret-square-left", - "toggle-right": "far-caret-square-right", - "toggle-up": "far-caret-square-up", - trash: "trash-alt", - "trash-o": "far-trash-alt", - trello: "fab-trello", - tripadvisor: "fab-tripadvisor", - try: "lira-sign", - tumblr: "fab-tumblr", - "tumblr-square": "fab-tumblr-square", - "turkish-lira": "lira-sign", - twitch: "fab-twitch", - twitter: "fab-twitter", - "twitter-square": "fab-twitter-square", - unsorted: "sort", - usb: "fab-usb", - usd: "dollar-sign", - "user-circle-o": "far-user-circle", - "user-o": "far-user", - vcard: "address-card", - "vcard-o": "far-address-card", - viacoin: "fab-viacoin", - viadeo: "fab-viadeo", - "viadeo-square": "fab-viadeo-square", - "video-camera": "video", - vimeo: "fab-vimeo-v", - "vimeo-square": "fab-vimeo-square", - vine: "fab-vine", - vk: "fab-vk", - vkontakte: "fab-vk", - "volume-control-phone": "phone-volume", - warning: "exclamation-triangle", - wechat: "fab-weixin", - weibo: "fab-weibo", - weixin: "fab-weixin", - whatsapp: "fab-whatsapp", - "wheelchair-alt": "fab-accessible-icon", - "wikipedia-w": "fab-wikipedia-w", - "window-close-o": "far-window-close", - "window-maximize": "far-window-maximize", - "window-restore": "far-window-restore", - windows: "fab-windows", - won: "won-sign", - wordpress: "fab-wordpress", - wpbeginner: "fab-wpbeginner", - wpexplorer: "fab-wpexplorer", - wpforms: "fab-wpforms", - xing: "fab-xing", - "xing-square": "fab-xing-square", - "y-combinator": "fab-y-combinator", - "y-combinator-square": "fab-hacker-news", - yahoo: "fab-yahoo", - yc: "fab-y-combinator", - "yc-square": "fab-hacker-news", - yelp: "fab-yelp", - yen: "yen-sign", - yoast: "fab-yoast", - youtube: "fab-youtube", - "youtube-play": "fab-youtube", - "youtube-square": "fab-youtube-square" -}; - export function replaceIcon(source, destination) { REPLACEMENTS[source] = destination; } @@ -584,36 +114,9 @@ function warnIfMissing(id) { } } -const reportedIcons = []; - -function warnIfDeprecated(oldId, newId) { - deprecated( - `Please replace all occurrences of "${oldId}"" with "${newId}". FontAwesome 4.7 icon names are now deprecated and will be removed in the next release.` - ); - if (!Discourse.testing && !reportedIcons.includes(oldId)) { - const errorData = { - message: `FA icon deprecation: replace "${oldId}"" with "${newId}".`, - stacktrace: Error().stack - }; - - jQuery.ajax(`${Discourse.BaseUri}/logs/report_js_error`, { - data: errorData, - type: "POST", - cache: false - }); - - reportedIcons.push(oldId); - } -} - function handleIconId(icon) { let id = icon.replacementId || icon.id || ""; - if (fa4Replacements.hasOwnProperty(id)) { - warnIfDeprecated(id, fa4Replacements[id]); - id = fa4Replacements[id]; - } - // TODO: clean up "thumbtack unpinned" at source instead of here id = id.replace(" unpinned", ""); diff --git a/lib/svg_sprite/fa4-renames.json b/db/migrate/20200517140915_fa4_renames.json similarity index 100% rename from lib/svg_sprite/fa4-renames.json rename to db/migrate/20200517140915_fa4_renames.json diff --git a/db/migrate/20200517140915_update_deprecated_icon_names.rb b/db/migrate/20200517140915_update_deprecated_icon_names.rb new file mode 100644 index 00000000000..74c07f7c6ee --- /dev/null +++ b/db/migrate/20200517140915_update_deprecated_icon_names.rb @@ -0,0 +1,32 @@ +# frozen_string_literal: true + +class UpdateDeprecatedIconNames < ActiveRecord::Migration[6.0] + def up + migrate_value("up") + end + + def down + migrate_value("down") + end + + def migrate_value(dir) + icons = File.open("#{Rails.root}/db/migrate/20200517140915_fa4_renames.json", "r:UTF-8") { |f| JSON.parse(f.read) } + + icons.each do |key, value| + from = dir == "up" ? key : value + to = dir == "up" ? value : key + execute <<~SQL + UPDATE badges + SET icon = '#{to}' + WHERE icon = '#{from}' OR icon = 'fa-#{from}' + SQL + + execute <<~SQL + UPDATE groups + SET flair_icon = '#{to}' + WHERE flair_icon = '#{from}' OR flair_icon = 'fa-#{from}' + SQL + + end + end +end diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb index 90571781d17..e91acfe138a 100644 --- a/lib/svg_sprite/svg_sprite.rb +++ b/lib/svg_sprite/svg_sprite.rb @@ -421,18 +421,10 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL icons end - def self.fa4_shim_file - "#{Rails.root}/lib/svg_sprite/fa4-renames.json" - end - - def self.fa4_to_fa5_names - @db ||= File.open(fa4_shim_file, "r:UTF-8") { |f| JSON.parse(f.read) } - end - def self.process(icon_name) icon_name = icon_name.strip FA_ICON_MAP.each { |k, v| icon_name = icon_name.sub(k, v) } - fa4_to_fa5_names[icon_name] || icon_name + icon_name end def self.get_set_cache(key) diff --git a/spec/components/svg_sprite/svg_sprite_spec.rb b/spec/components/svg_sprite/svg_sprite_spec.rb index 4a3100a5aab..298a06dd7b3 100644 --- a/spec/components/svg_sprite/svg_sprite_spec.rb +++ b/spec/components/svg_sprite/svg_sprite_spec.rb @@ -86,11 +86,6 @@ describe SvgSprite do expect(SvgSprite.all_icons).not_to include(" fab-facebook-messenger ") end - it 'includes Font Awesome 4.7 icons from badges' do - Fabricate(:badge, name: 'Custom Icon Badge', icon: 'fa-gamepad') - expect(SvgSprite.all_icons).to include("gamepad") - end - it 'includes Font Awesome 5 icons from badges' do Fabricate(:badge, name: 'Custom Icon Badge', icon: 'far fa-building') expect(SvgSprite.all_icons).to include("far-building") @@ -215,13 +210,8 @@ describe SvgSprite do expect(SvgSprite.all_icons).to include("fab-bandcamp") end - it "includes Font Awesome 4.7 icons as group flair" do - group = Fabricate(:group, flair_icon: "fa-air-freshener") - expect(SvgSprite.bundle).to match(/air-freshener/) - end - - it "includes Font Awesome 5 icons as group flair" do - group = Fabricate(:group, flair_icon: "far fa-building") - expect(SvgSprite.bundle).to match(/building/) + it "includes Font Awesome icon from groups" do + group = Fabricate(:group, flair_icon: "far-building") + expect(SvgSprite.bundle).to match(/far-building/) end end diff --git a/test/javascripts/lib/icon-library-test.js b/test/javascripts/lib/icon-library-test.js index 02055d2e0ff..cf59cb70374 100644 --- a/test/javascripts/lib/icon-library-test.js +++ b/test/javascripts/lib/icon-library-test.js @@ -18,14 +18,6 @@ QUnit.test("return icon markup", assert => { }); QUnit.test("convert icon names", assert => { - const fa47Icon = convertIconClass("fa-clock-o"); - assert.ok(iconHTML(fa47Icon).indexOf("far-clock") > -1, "FA 4.7 syntax"); - - assert.ok( - iconHTML("area-chart").indexOf("chart-area") > -1, - "renamed FA 4.7 icons" - ); - const fa5Icon = convertIconClass("fab fa-facebook"); assert.ok(iconHTML(fa5Icon).indexOf("fab-facebook") > -1, "FA 5 syntax");