From b84171c2faca330298bee3aed5085b49f50aab7b Mon Sep 17 00:00:00 2001 From: zubiden <19638254+zubiden@users.noreply.github.com> Date: Wed, 15 Oct 2025 19:57:10 +0200 Subject: [PATCH] Icon: Split CSS styles and SCSS mixins (#6357) --- .fantasticonrc.cjs | 3 +- .stylelintrc.json | 2 +- dev/icons.css.hbs | 31 ++ dev/icons.scss.hbs | 30 +- src/styles/_fonts.scss | 9 - src/styles/icons.css | 905 +++++++++++++++++++++++++++++++++++++++++ src/styles/icons.scss | 904 +--------------------------------------- src/styles/index.scss | 9 +- 8 files changed, 947 insertions(+), 946 deletions(-) create mode 100644 dev/icons.css.hbs delete mode 100644 src/styles/_fonts.scss create mode 100644 src/styles/icons.css diff --git a/.fantasticonrc.cjs b/.fantasticonrc.cjs index 02192ffda..70a01518f 100644 --- a/.fantasticonrc.cjs +++ b/.fantasticonrc.cjs @@ -3,11 +3,12 @@ module.exports = { outputDir: './src/styles', name: 'icons', fontTypes: ['woff2', 'woff'], - assetTypes: ['scss', 'ts'], + assetTypes: ['css', 'scss', 'ts'], tag: '', normalize: true, templates: { scss: './dev/icons.scss.hbs', + css: './dev/icons.css.hbs', }, formatOptions: { ts: { diff --git a/.stylelintrc.json b/.stylelintrc.json index e7c6343ff..ef577e323 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -6,7 +6,7 @@ ], "ignoreFiles": [ "dist/*.css", - "src/styles/icons.scss" + "src/styles/icons.{scss,css}" ], "plugins": [ "@stylistic/stylelint-plugin", diff --git a/dev/icons.css.hbs b/dev/icons.css.hbs new file mode 100644 index 000000000..dc34cfdfa --- /dev/null +++ b/dev/icons.css.hbs @@ -0,0 +1,31 @@ +@font-face { + font-family: "{{ name }}"; + font-weight: normal; + font-style: normal; + font-display: block; + src: {{{ fontSrc }}}; +} + +.icon-char::before { + font-family: Roboto, "Helvetica Neue", sans-serif; + content: attr(data-char); + width: 1em; + text-align: center; + display: block; +} + +.icon-placeholder::before { + content: ''; + display: block; + width: 1em; +} + +{{# each codepoints }} +{{# if ../selector }} +{{ ../selector }}.{{ ../prefix }}-{{ @key }}::before { +{{ else }} +{{ tag }}.{{ ../prefix }}-{{ @key }}::before { +{{/ if }} + content: "\\{{ codepoint this }}"; +} +{{/ each }} diff --git a/dev/icons.scss.hbs b/dev/icons.scss.hbs index 16e1ab94c..05cac9394 100644 --- a/dev/icons.scss.hbs +++ b/dev/icons.scss.hbs @@ -1,21 +1,7 @@ @use "sass:map"; -.icon-char::before { - font-family: Roboto, "Helvetica Neue", sans-serif; - content: attr(data-char); - width: 1em; - text-align: center; - display: block; -} - -.icon-placeholder::before { - content: ''; - display: block; - width: 1em; -} - @mixin icon { - /* use !important to prevent issues with browser extensions that change fonts */ + /* !important to prevent issues with browser extensions that change fonts */ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: "{{ name }}" !important; speak: none; @@ -25,26 +11,12 @@ text-transform: none; line-height: 1; - /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -{{# if selector }}{{ selector }}::before { -{{ else }}{{ tag }}.{{prefix}} { -{{/ if }} - @include icon; -} - ${{ name }}-map: ( {{# each codepoints }} "{{ @key }}": "\\{{ codepoint this }}", {{/ each }} ); - -{{# each codepoints }} -{{# if ../selector }} {{ ../selector }}.{{ ../prefix }}-{{ @key }}::before { -{{ else }}{{ tag }}.{{ ../prefix }}-{{ @key }}::before { -{{/ if }} content: map.get(${{ ../name }}-map, "{{ @key }}"); -} -{{/ each }} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index d0607d5ab..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,9 +0,0 @@ -$icons-font: "icons"; - -@font-face { - font-family: $icons-font; - font-weight: normal; - font-style: normal; - font-display: block; - src: url("./icons.woff2") format("woff2"), url("./icons.woff") format("woff"); -} diff --git a/src/styles/icons.css b/src/styles/icons.css new file mode 100644 index 000000000..3d08ef07a --- /dev/null +++ b/src/styles/icons.css @@ -0,0 +1,905 @@ +@font-face { + font-family: "icons"; + font-weight: normal; + font-style: normal; + font-display: block; + src: url("./icons.woff2?2c0ef26912799b44f650248acc1b48ec") format("woff2"), +url("./icons.woff?2c0ef26912799b44f650248acc1b48ec") format("woff"); +} + +.icon-char::before { + font-family: Roboto, "Helvetica Neue", sans-serif; + content: attr(data-char); + width: 1em; + text-align: center; + display: block; +} + +.icon-placeholder::before { + content: ''; + display: block; + width: 1em; +} + +.icon-active-sessions::before { + content: "\f101"; +} +.icon-add-one-badge::before { + content: "\f102"; +} +.icon-add-user-filled::before { + content: "\f103"; +} +.icon-add-user::before { + content: "\f104"; +} +.icon-add::before { + content: "\f105"; +} +.icon-admin::before { + content: "\f106"; +} +.icon-allow-speak::before { + content: "\f107"; +} +.icon-animals::before { + content: "\f108"; +} +.icon-animations::before { + content: "\f109"; +} +.icon-archive-filled::before { + content: "\f10a"; +} +.icon-archive-from-main::before { + content: "\f10b"; +} +.icon-archive-to-main::before { + content: "\f10c"; +} +.icon-archive::before { + content: "\f10d"; +} +.icon-arrow-down-circle::before { + content: "\f10e"; +} +.icon-arrow-down::before { + content: "\f10f"; +} +.icon-arrow-left::before { + content: "\f110"; +} +.icon-arrow-right::before { + content: "\f111"; +} +.icon-ask-support::before { + content: "\f112"; +} +.icon-attach::before { + content: "\f113"; +} +.icon-auction::before { + content: "\f114"; +} +.icon-author-hidden::before { + content: "\f115"; +} +.icon-avatar-archived-chats::before { + content: "\f116"; +} +.icon-avatar-deleted-account::before { + content: "\f117"; +} +.icon-avatar-saved-messages::before { + content: "\f118"; +} +.icon-bold::before { + content: "\f119"; +} +.icon-boost-outline::before { + content: "\f11a"; +} +.icon-boost::before { + content: "\f11b"; +} +.icon-boostcircle::before { + content: "\f11c"; +} +.icon-boosts::before { + content: "\f11d"; +} +.icon-bot-command::before { + content: "\f11e"; +} +.icon-bot-commands-filled::before { + content: "\f11f"; +} +.icon-bots::before { + content: "\f120"; +} +.icon-bug::before { + content: "\f121"; +} +.icon-calendar-filter::before { + content: "\f122"; +} +.icon-calendar::before { + content: "\f123"; +} +.icon-camera-add::before { + content: "\f124"; +} +.icon-camera::before { + content: "\f125"; +} +.icon-car::before { + content: "\f126"; +} +.icon-card::before { + content: "\f127"; +} +.icon-cash-circle::before { + content: "\f128"; +} +.icon-channel-filled::before { + content: "\f129"; +} +.icon-channel::before { + content: "\f12a"; +} +.icon-channelviews::before { + content: "\f12b"; +} +.icon-chat-badge::before { + content: "\f12c"; +} +.icon-chats-badge::before { + content: "\f12d"; +} +.icon-check::before { + content: "\f12e"; +} +.icon-clock-edit::before { + content: "\f12f"; +} +.icon-clock::before { + content: "\f130"; +} +.icon-close-circle::before { + content: "\f131"; +} +.icon-close-topic::before { + content: "\f132"; +} +.icon-close::before { + content: "\f133"; +} +.icon-closed-gift::before { + content: "\f134"; +} +.icon-cloud-download::before { + content: "\f135"; +} +.icon-collapse-modal::before { + content: "\f136"; +} +.icon-collapse::before { + content: "\f137"; +} +.icon-colorize::before { + content: "\f138"; +} +.icon-comments-sticker::before { + content: "\f139"; +} +.icon-comments::before { + content: "\f13a"; +} +.icon-copy-media::before { + content: "\f13b"; +} +.icon-copy::before { + content: "\f13c"; +} +.icon-crown-take-off-outline::before { + content: "\f13d"; +} +.icon-crown-take-off::before { + content: "\f13e"; +} +.icon-crown-wear-outline::before { + content: "\f13f"; +} +.icon-crown-wear::before { + content: "\f140"; +} +.icon-darkmode::before { + content: "\f141"; +} +.icon-data::before { + content: "\f142"; +} +.icon-delete-filled::before { + content: "\f143"; +} +.icon-delete-left::before { + content: "\f144"; +} +.icon-delete-user::before { + content: "\f145"; +} +.icon-delete::before { + content: "\f146"; +} +.icon-diamond::before { + content: "\f147"; +} +.icon-document::before { + content: "\f148"; +} +.icon-double-badge::before { + content: "\f149"; +} +.icon-down::before { + content: "\f14a"; +} +.icon-download::before { + content: "\f14b"; +} +.icon-dropdown-arrows::before { + content: "\f14c"; +} +.icon-eats::before { + content: "\f14d"; +} +.icon-edit::before { + content: "\f14e"; +} +.icon-email::before { + content: "\f14f"; +} +.icon-enter::before { + content: "\f150"; +} +.icon-expand-modal::before { + content: "\f151"; +} +.icon-expand::before { + content: "\f152"; +} +.icon-eye-crossed-outline::before { + content: "\f153"; +} +.icon-eye-crossed::before { + content: "\f154"; +} +.icon-eye-outline::before { + content: "\f155"; +} +.icon-eye::before { + content: "\f156"; +} +.icon-favorite-filled::before { + content: "\f157"; +} +.icon-favorite::before { + content: "\f158"; +} +.icon-file-badge::before { + content: "\f159"; +} +.icon-flag::before { + content: "\f15a"; +} +.icon-folder-badge::before { + content: "\f15b"; +} +.icon-folder::before { + content: "\f15c"; +} +.icon-fontsize::before { + content: "\f15d"; +} +.icon-forums::before { + content: "\f15e"; +} +.icon-forward::before { + content: "\f15f"; +} +.icon-fragment::before { + content: "\f160"; +} +.icon-frozen-time::before { + content: "\f161"; +} +.icon-fullscreen::before { + content: "\f162"; +} +.icon-gifs::before { + content: "\f163"; +} +.icon-gift-transfer-inline::before { + content: "\f164"; +} +.icon-gift::before { + content: "\f165"; +} +.icon-group-filled::before { + content: "\f166"; +} +.icon-group::before { + content: "\f167"; +} +.icon-grouped-disable::before { + content: "\f168"; +} +.icon-grouped::before { + content: "\f169"; +} +.icon-hand-stop::before { + content: "\f16a"; +} +.icon-hashtag::before { + content: "\f16b"; +} +.icon-hd-photo::before { + content: "\f16c"; +} +.icon-heart-outline::before { + content: "\f16d"; +} +.icon-heart::before { + content: "\f16e"; +} +.icon-help::before { + content: "\f16f"; +} +.icon-info-filled::before { + content: "\f170"; +} +.icon-info::before { + content: "\f171"; +} +.icon-install::before { + content: "\f172"; +} +.icon-italic::before { + content: "\f173"; +} +.icon-key::before { + content: "\f174"; +} +.icon-keyboard::before { + content: "\f175"; +} +.icon-lamp::before { + content: "\f176"; +} +.icon-language::before { + content: "\f177"; +} +.icon-large-pause::before { + content: "\f178"; +} +.icon-large-play::before { + content: "\f179"; +} +.icon-link-badge::before { + content: "\f17a"; +} +.icon-link-broken::before { + content: "\f17b"; +} +.icon-link::before { + content: "\f17c"; +} +.icon-location::before { + content: "\f17d"; +} +.icon-lock-badge::before { + content: "\f17e"; +} +.icon-lock::before { + content: "\f17f"; +} +.icon-logout::before { + content: "\f180"; +} +.icon-loop::before { + content: "\f181"; +} +.icon-mention::before { + content: "\f182"; +} +.icon-message-failed::before { + content: "\f183"; +} +.icon-message-pending::before { + content: "\f184"; +} +.icon-message-read::before { + content: "\f185"; +} +.icon-message-succeeded::before { + content: "\f186"; +} +.icon-message::before { + content: "\f187"; +} +.icon-microphone-alt::before { + content: "\f188"; +} +.icon-microphone::before { + content: "\f189"; +} +.icon-monospace::before { + content: "\f18a"; +} +.icon-more-circle::before { + content: "\f18b"; +} +.icon-more::before { + content: "\f18c"; +} +.icon-move-caption-down::before { + content: "\f18d"; +} +.icon-move-caption-up::before { + content: "\f18e"; +} +.icon-mute::before { + content: "\f18f"; +} +.icon-muted::before { + content: "\f190"; +} +.icon-my-notes::before { + content: "\f191"; +} +.icon-new-chat-filled::before { + content: "\f192"; +} +.icon-next::before { + content: "\f193"; +} +.icon-nochannel::before { + content: "\f194"; +} +.icon-noise-suppression::before { + content: "\f195"; +} +.icon-non-contacts::before { + content: "\f196"; +} +.icon-one-filled::before { + content: "\f197"; +} +.icon-open-in-new-tab::before { + content: "\f198"; +} +.icon-password-off::before { + content: "\f199"; +} +.icon-pause::before { + content: "\f19a"; +} +.icon-permissions::before { + content: "\f19b"; +} +.icon-phone-discard-outline::before { + content: "\f19c"; +} +.icon-phone-discard::before { + content: "\f19d"; +} +.icon-phone::before { + content: "\f19e"; +} +.icon-photo::before { + content: "\f19f"; +} +.icon-pin-badge::before { + content: "\f1a0"; +} +.icon-pin-list::before { + content: "\f1a1"; +} +.icon-pin::before { + content: "\f1a2"; +} +.icon-pinned-chat::before { + content: "\f1a3"; +} +.icon-pinned-message::before { + content: "\f1a4"; +} +.icon-pip::before { + content: "\f1a5"; +} +.icon-play-story::before { + content: "\f1a6"; +} +.icon-play::before { + content: "\f1a7"; +} +.icon-poll::before { + content: "\f1a8"; +} +.icon-previous::before { + content: "\f1a9"; +} +.icon-privacy-policy::before { + content: "\f1aa"; +} +.icon-proof-of-ownership::before { + content: "\f1ab"; +} +.icon-quote-text::before { + content: "\f1ac"; +} +.icon-quote::before { + content: "\f1ad"; +} +.icon-radial-badge::before { + content: "\f1ae"; +} +.icon-rating-icons-level1::before { + content: "\f1af"; +} +.icon-rating-icons-level10::before { + content: "\f1b0"; +} +.icon-rating-icons-level2::before { + content: "\f1b1"; +} +.icon-rating-icons-level20::before { + content: "\f1b2"; +} +.icon-rating-icons-level3::before { + content: "\f1b3"; +} +.icon-rating-icons-level30::before { + content: "\f1b4"; +} +.icon-rating-icons-level4::before { + content: "\f1b5"; +} +.icon-rating-icons-level40::before { + content: "\f1b6"; +} +.icon-rating-icons-level5::before { + content: "\f1b7"; +} +.icon-rating-icons-level50::before { + content: "\f1b8"; +} +.icon-rating-icons-level6::before { + content: "\f1b9"; +} +.icon-rating-icons-level60::before { + content: "\f1ba"; +} +.icon-rating-icons-level7::before { + content: "\f1bb"; +} +.icon-rating-icons-level70::before { + content: "\f1bc"; +} +.icon-rating-icons-level8::before { + content: "\f1bd"; +} +.icon-rating-icons-level80::before { + content: "\f1be"; +} +.icon-rating-icons-level9::before { + content: "\f1bf"; +} +.icon-rating-icons-level90::before { + content: "\f1c0"; +} +.icon-rating-icons-negative::before { + content: "\f1c1"; +} +.icon-readchats::before { + content: "\f1c2"; +} +.icon-recent::before { + content: "\f1c3"; +} +.icon-refund::before { + content: "\f1c4"; +} +.icon-reload::before { + content: "\f1c5"; +} +.icon-remove-quote::before { + content: "\f1c6"; +} +.icon-remove::before { + content: "\f1c7"; +} +.icon-reopen-topic::before { + content: "\f1c8"; +} +.icon-replace::before { + content: "\f1c9"; +} +.icon-replies::before { + content: "\f1ca"; +} +.icon-reply-filled::before { + content: "\f1cb"; +} +.icon-reply::before { + content: "\f1cc"; +} +.icon-revenue-split::before { + content: "\f1cd"; +} +.icon-revote::before { + content: "\f1ce"; +} +.icon-save-story::before { + content: "\f1cf"; +} +.icon-saved-messages::before { + content: "\f1d0"; +} +.icon-schedule::before { + content: "\f1d1"; +} +.icon-scheduled::before { + content: "\f1d2"; +} +.icon-sd-photo::before { + content: "\f1d3"; +} +.icon-search::before { + content: "\f1d4"; +} +.icon-select::before { + content: "\f1d5"; +} +.icon-sell-outline::before { + content: "\f1d6"; +} +.icon-sell::before { + content: "\f1d7"; +} +.icon-send-outline::before { + content: "\f1d8"; +} +.icon-send::before { + content: "\f1d9"; +} +.icon-settings-filled::before { + content: "\f1da"; +} +.icon-settings::before { + content: "\f1db"; +} +.icon-share-filled::before { + content: "\f1dc"; +} +.icon-share-screen-outlined::before { + content: "\f1dd"; +} +.icon-share-screen-stop::before { + content: "\f1de"; +} +.icon-share-screen::before { + content: "\f1df"; +} +.icon-show-message::before { + content: "\f1e0"; +} +.icon-sidebar::before { + content: "\f1e1"; +} +.icon-skip-next::before { + content: "\f1e2"; +} +.icon-skip-previous::before { + content: "\f1e3"; +} +.icon-smallscreen::before { + content: "\f1e4"; +} +.icon-smile::before { + content: "\f1e5"; +} +.icon-sort-by-date::before { + content: "\f1e6"; +} +.icon-sort-by-number::before { + content: "\f1e7"; +} +.icon-sort-by-price::before { + content: "\f1e8"; +} +.icon-sort::before { + content: "\f1e9"; +} +.icon-speaker-muted-story::before { + content: "\f1ea"; +} +.icon-speaker-outline::before { + content: "\f1eb"; +} +.icon-speaker-story::before { + content: "\f1ec"; +} +.icon-speaker::before { + content: "\f1ed"; +} +.icon-spoiler-disable::before { + content: "\f1ee"; +} +.icon-spoiler::before { + content: "\f1ef"; +} +.icon-sport::before { + content: "\f1f0"; +} +.icon-star::before { + content: "\f1f1"; +} +.icon-stars-lock::before { + content: "\f1f2"; +} +.icon-stars-refund::before { + content: "\f1f3"; +} +.icon-stats::before { + content: "\f1f4"; +} +.icon-stealth-future::before { + content: "\f1f5"; +} +.icon-stealth-past::before { + content: "\f1f6"; +} +.icon-stickers::before { + content: "\f1f7"; +} +.icon-stop-raising-hand::before { + content: "\f1f8"; +} +.icon-stop::before { + content: "\f1f9"; +} +.icon-story-caption::before { + content: "\f1fa"; +} +.icon-story-expired::before { + content: "\f1fb"; +} +.icon-story-priority::before { + content: "\f1fc"; +} +.icon-story-reply::before { + content: "\f1fd"; +} +.icon-strikethrough::before { + content: "\f1fe"; +} +.icon-tag-add::before { + content: "\f1ff"; +} +.icon-tag-crossed::before { + content: "\f200"; +} +.icon-tag-filter::before { + content: "\f201"; +} +.icon-tag-name::before { + content: "\f202"; +} +.icon-tag::before { + content: "\f203"; +} +.icon-timer::before { + content: "\f204"; +} +.icon-toncoin::before { + content: "\f205"; +} +.icon-trade::before { + content: "\f206"; +} +.icon-transcribe::before { + content: "\f207"; +} +.icon-truck::before { + content: "\f208"; +} +.icon-unarchive::before { + content: "\f209"; +} +.icon-underlined::before { + content: "\f20a"; +} +.icon-understood::before { + content: "\f20b"; +} +.icon-unique-profile::before { + content: "\f20c"; +} +.icon-unlist-outline::before { + content: "\f20d"; +} +.icon-unlist::before { + content: "\f20e"; +} +.icon-unlock-badge::before { + content: "\f20f"; +} +.icon-unlock::before { + content: "\f210"; +} +.icon-unmute::before { + content: "\f211"; +} +.icon-unpin::before { + content: "\f212"; +} +.icon-unread::before { + content: "\f213"; +} +.icon-up::before { + content: "\f214"; +} +.icon-user-filled::before { + content: "\f215"; +} +.icon-user-online::before { + content: "\f216"; +} +.icon-user-stars::before { + content: "\f217"; +} +.icon-user::before { + content: "\f218"; +} +.icon-video-outlined::before { + content: "\f219"; +} +.icon-video-stop::before { + content: "\f21a"; +} +.icon-video::before { + content: "\f21b"; +} +.icon-view-once::before { + content: "\f21c"; +} +.icon-voice-chat::before { + content: "\f21d"; +} +.icon-volume-1::before { + content: "\f21e"; +} +.icon-volume-2::before { + content: "\f21f"; +} +.icon-volume-3::before { + content: "\f220"; +} +.icon-warning::before { + content: "\f221"; +} +.icon-web::before { + content: "\f222"; +} +.icon-webapp::before { + content: "\f223"; +} +.icon-word-wrap::before { + content: "\f224"; +} +.icon-zoom-in::before { + content: "\f225"; +} +.icon-zoom-out::before { + content: "\f226"; +} diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 500f0ca9a..572a76e38 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -1,21 +1,7 @@ @use "sass:map"; -.icon-char::before { - font-family: Roboto, "Helvetica Neue", sans-serif; - content: attr(data-char); - width: 1em; - text-align: center; - display: block; -} - -.icon-placeholder::before { - content: ''; - display: block; - width: 1em; -} - @mixin icon { - /* use !important to prevent issues with browser extensions that change fonts */ + /* !important to prevent issues with browser extensions that change fonts */ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: "icons" !important; speak: none; @@ -25,15 +11,10 @@ text-transform: none; line-height: 1; - /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.icon { - @include icon; -} - $icons-map: ( "active-sessions": "\f101", "add-one-badge": "\f102", @@ -330,886 +311,3 @@ $icons-map: ( "zoom-in": "\f225", "zoom-out": "\f226", ); - -.icon-active-sessions::before { - content: map.get($icons-map, "active-sessions"); -} -.icon-add-one-badge::before { - content: map.get($icons-map, "add-one-badge"); -} -.icon-add-user-filled::before { - content: map.get($icons-map, "add-user-filled"); -} -.icon-add-user::before { - content: map.get($icons-map, "add-user"); -} -.icon-add::before { - content: map.get($icons-map, "add"); -} -.icon-admin::before { - content: map.get($icons-map, "admin"); -} -.icon-allow-speak::before { - content: map.get($icons-map, "allow-speak"); -} -.icon-animals::before { - content: map.get($icons-map, "animals"); -} -.icon-animations::before { - content: map.get($icons-map, "animations"); -} -.icon-archive-filled::before { - content: map.get($icons-map, "archive-filled"); -} -.icon-archive-from-main::before { - content: map.get($icons-map, "archive-from-main"); -} -.icon-archive-to-main::before { - content: map.get($icons-map, "archive-to-main"); -} -.icon-archive::before { - content: map.get($icons-map, "archive"); -} -.icon-arrow-down-circle::before { - content: map.get($icons-map, "arrow-down-circle"); -} -.icon-arrow-down::before { - content: map.get($icons-map, "arrow-down"); -} -.icon-arrow-left::before { - content: map.get($icons-map, "arrow-left"); -} -.icon-arrow-right::before { - content: map.get($icons-map, "arrow-right"); -} -.icon-ask-support::before { - content: map.get($icons-map, "ask-support"); -} -.icon-attach::before { - content: map.get($icons-map, "attach"); -} -.icon-auction::before { - content: map.get($icons-map, "auction"); -} -.icon-author-hidden::before { - content: map.get($icons-map, "author-hidden"); -} -.icon-avatar-archived-chats::before { - content: map.get($icons-map, "avatar-archived-chats"); -} -.icon-avatar-deleted-account::before { - content: map.get($icons-map, "avatar-deleted-account"); -} -.icon-avatar-saved-messages::before { - content: map.get($icons-map, "avatar-saved-messages"); -} -.icon-bold::before { - content: map.get($icons-map, "bold"); -} -.icon-boost-outline::before { - content: map.get($icons-map, "boost-outline"); -} -.icon-boost::before { - content: map.get($icons-map, "boost"); -} -.icon-boostcircle::before { - content: map.get($icons-map, "boostcircle"); -} -.icon-boosts::before { - content: map.get($icons-map, "boosts"); -} -.icon-bot-command::before { - content: map.get($icons-map, "bot-command"); -} -.icon-bot-commands-filled::before { - content: map.get($icons-map, "bot-commands-filled"); -} -.icon-bots::before { - content: map.get($icons-map, "bots"); -} -.icon-bug::before { - content: map.get($icons-map, "bug"); -} -.icon-calendar-filter::before { - content: map.get($icons-map, "calendar-filter"); -} -.icon-calendar::before { - content: map.get($icons-map, "calendar"); -} -.icon-camera-add::before { - content: map.get($icons-map, "camera-add"); -} -.icon-camera::before { - content: map.get($icons-map, "camera"); -} -.icon-car::before { - content: map.get($icons-map, "car"); -} -.icon-card::before { - content: map.get($icons-map, "card"); -} -.icon-cash-circle::before { - content: map.get($icons-map, "cash-circle"); -} -.icon-channel-filled::before { - content: map.get($icons-map, "channel-filled"); -} -.icon-channel::before { - content: map.get($icons-map, "channel"); -} -.icon-channelviews::before { - content: map.get($icons-map, "channelviews"); -} -.icon-chat-badge::before { - content: map.get($icons-map, "chat-badge"); -} -.icon-chats-badge::before { - content: map.get($icons-map, "chats-badge"); -} -.icon-check::before { - content: map.get($icons-map, "check"); -} -.icon-clock-edit::before { - content: map.get($icons-map, "clock-edit"); -} -.icon-clock::before { - content: map.get($icons-map, "clock"); -} -.icon-close-circle::before { - content: map.get($icons-map, "close-circle"); -} -.icon-close-topic::before { - content: map.get($icons-map, "close-topic"); -} -.icon-close::before { - content: map.get($icons-map, "close"); -} -.icon-closed-gift::before { - content: map.get($icons-map, "closed-gift"); -} -.icon-cloud-download::before { - content: map.get($icons-map, "cloud-download"); -} -.icon-collapse-modal::before { - content: map.get($icons-map, "collapse-modal"); -} -.icon-collapse::before { - content: map.get($icons-map, "collapse"); -} -.icon-colorize::before { - content: map.get($icons-map, "colorize"); -} -.icon-comments-sticker::before { - content: map.get($icons-map, "comments-sticker"); -} -.icon-comments::before { - content: map.get($icons-map, "comments"); -} -.icon-copy-media::before { - content: map.get($icons-map, "copy-media"); -} -.icon-copy::before { - content: map.get($icons-map, "copy"); -} -.icon-crown-take-off-outline::before { - content: map.get($icons-map, "crown-take-off-outline"); -} -.icon-crown-take-off::before { - content: map.get($icons-map, "crown-take-off"); -} -.icon-crown-wear-outline::before { - content: map.get($icons-map, "crown-wear-outline"); -} -.icon-crown-wear::before { - content: map.get($icons-map, "crown-wear"); -} -.icon-darkmode::before { - content: map.get($icons-map, "darkmode"); -} -.icon-data::before { - content: map.get($icons-map, "data"); -} -.icon-delete-filled::before { - content: map.get($icons-map, "delete-filled"); -} -.icon-delete-left::before { - content: map.get($icons-map, "delete-left"); -} -.icon-delete-user::before { - content: map.get($icons-map, "delete-user"); -} -.icon-delete::before { - content: map.get($icons-map, "delete"); -} -.icon-diamond::before { - content: map.get($icons-map, "diamond"); -} -.icon-document::before { - content: map.get($icons-map, "document"); -} -.icon-double-badge::before { - content: map.get($icons-map, "double-badge"); -} -.icon-down::before { - content: map.get($icons-map, "down"); -} -.icon-download::before { - content: map.get($icons-map, "download"); -} -.icon-dropdown-arrows::before { - content: map.get($icons-map, "dropdown-arrows"); -} -.icon-eats::before { - content: map.get($icons-map, "eats"); -} -.icon-edit::before { - content: map.get($icons-map, "edit"); -} -.icon-email::before { - content: map.get($icons-map, "email"); -} -.icon-enter::before { - content: map.get($icons-map, "enter"); -} -.icon-expand-modal::before { - content: map.get($icons-map, "expand-modal"); -} -.icon-expand::before { - content: map.get($icons-map, "expand"); -} -.icon-eye-crossed-outline::before { - content: map.get($icons-map, "eye-crossed-outline"); -} -.icon-eye-crossed::before { - content: map.get($icons-map, "eye-crossed"); -} -.icon-eye-outline::before { - content: map.get($icons-map, "eye-outline"); -} -.icon-eye::before { - content: map.get($icons-map, "eye"); -} -.icon-favorite-filled::before { - content: map.get($icons-map, "favorite-filled"); -} -.icon-favorite::before { - content: map.get($icons-map, "favorite"); -} -.icon-file-badge::before { - content: map.get($icons-map, "file-badge"); -} -.icon-flag::before { - content: map.get($icons-map, "flag"); -} -.icon-folder-badge::before { - content: map.get($icons-map, "folder-badge"); -} -.icon-folder::before { - content: map.get($icons-map, "folder"); -} -.icon-fontsize::before { - content: map.get($icons-map, "fontsize"); -} -.icon-forums::before { - content: map.get($icons-map, "forums"); -} -.icon-forward::before { - content: map.get($icons-map, "forward"); -} -.icon-fragment::before { - content: map.get($icons-map, "fragment"); -} -.icon-frozen-time::before { - content: map.get($icons-map, "frozen-time"); -} -.icon-fullscreen::before { - content: map.get($icons-map, "fullscreen"); -} -.icon-gifs::before { - content: map.get($icons-map, "gifs"); -} -.icon-gift-transfer-inline::before { - content: map.get($icons-map, "gift-transfer-inline"); -} -.icon-gift::before { - content: map.get($icons-map, "gift"); -} -.icon-group-filled::before { - content: map.get($icons-map, "group-filled"); -} -.icon-group::before { - content: map.get($icons-map, "group"); -} -.icon-grouped-disable::before { - content: map.get($icons-map, "grouped-disable"); -} -.icon-grouped::before { - content: map.get($icons-map, "grouped"); -} -.icon-hand-stop::before { - content: map.get($icons-map, "hand-stop"); -} -.icon-hashtag::before { - content: map.get($icons-map, "hashtag"); -} -.icon-hd-photo::before { - content: map.get($icons-map, "hd-photo"); -} -.icon-heart-outline::before { - content: map.get($icons-map, "heart-outline"); -} -.icon-heart::before { - content: map.get($icons-map, "heart"); -} -.icon-help::before { - content: map.get($icons-map, "help"); -} -.icon-info-filled::before { - content: map.get($icons-map, "info-filled"); -} -.icon-info::before { - content: map.get($icons-map, "info"); -} -.icon-install::before { - content: map.get($icons-map, "install"); -} -.icon-italic::before { - content: map.get($icons-map, "italic"); -} -.icon-key::before { - content: map.get($icons-map, "key"); -} -.icon-keyboard::before { - content: map.get($icons-map, "keyboard"); -} -.icon-lamp::before { - content: map.get($icons-map, "lamp"); -} -.icon-language::before { - content: map.get($icons-map, "language"); -} -.icon-large-pause::before { - content: map.get($icons-map, "large-pause"); -} -.icon-large-play::before { - content: map.get($icons-map, "large-play"); -} -.icon-link-badge::before { - content: map.get($icons-map, "link-badge"); -} -.icon-link-broken::before { - content: map.get($icons-map, "link-broken"); -} -.icon-link::before { - content: map.get($icons-map, "link"); -} -.icon-location::before { - content: map.get($icons-map, "location"); -} -.icon-lock-badge::before { - content: map.get($icons-map, "lock-badge"); -} -.icon-lock::before { - content: map.get($icons-map, "lock"); -} -.icon-logout::before { - content: map.get($icons-map, "logout"); -} -.icon-loop::before { - content: map.get($icons-map, "loop"); -} -.icon-mention::before { - content: map.get($icons-map, "mention"); -} -.icon-message-failed::before { - content: map.get($icons-map, "message-failed"); -} -.icon-message-pending::before { - content: map.get($icons-map, "message-pending"); -} -.icon-message-read::before { - content: map.get($icons-map, "message-read"); -} -.icon-message-succeeded::before { - content: map.get($icons-map, "message-succeeded"); -} -.icon-message::before { - content: map.get($icons-map, "message"); -} -.icon-microphone-alt::before { - content: map.get($icons-map, "microphone-alt"); -} -.icon-microphone::before { - content: map.get($icons-map, "microphone"); -} -.icon-monospace::before { - content: map.get($icons-map, "monospace"); -} -.icon-more-circle::before { - content: map.get($icons-map, "more-circle"); -} -.icon-more::before { - content: map.get($icons-map, "more"); -} -.icon-move-caption-down::before { - content: map.get($icons-map, "move-caption-down"); -} -.icon-move-caption-up::before { - content: map.get($icons-map, "move-caption-up"); -} -.icon-mute::before { - content: map.get($icons-map, "mute"); -} -.icon-muted::before { - content: map.get($icons-map, "muted"); -} -.icon-my-notes::before { - content: map.get($icons-map, "my-notes"); -} -.icon-new-chat-filled::before { - content: map.get($icons-map, "new-chat-filled"); -} -.icon-next::before { - content: map.get($icons-map, "next"); -} -.icon-nochannel::before { - content: map.get($icons-map, "nochannel"); -} -.icon-noise-suppression::before { - content: map.get($icons-map, "noise-suppression"); -} -.icon-non-contacts::before { - content: map.get($icons-map, "non-contacts"); -} -.icon-one-filled::before { - content: map.get($icons-map, "one-filled"); -} -.icon-open-in-new-tab::before { - content: map.get($icons-map, "open-in-new-tab"); -} -.icon-password-off::before { - content: map.get($icons-map, "password-off"); -} -.icon-pause::before { - content: map.get($icons-map, "pause"); -} -.icon-permissions::before { - content: map.get($icons-map, "permissions"); -} -.icon-phone-discard-outline::before { - content: map.get($icons-map, "phone-discard-outline"); -} -.icon-phone-discard::before { - content: map.get($icons-map, "phone-discard"); -} -.icon-phone::before { - content: map.get($icons-map, "phone"); -} -.icon-photo::before { - content: map.get($icons-map, "photo"); -} -.icon-pin-badge::before { - content: map.get($icons-map, "pin-badge"); -} -.icon-pin-list::before { - content: map.get($icons-map, "pin-list"); -} -.icon-pin::before { - content: map.get($icons-map, "pin"); -} -.icon-pinned-chat::before { - content: map.get($icons-map, "pinned-chat"); -} -.icon-pinned-message::before { - content: map.get($icons-map, "pinned-message"); -} -.icon-pip::before { - content: map.get($icons-map, "pip"); -} -.icon-play-story::before { - content: map.get($icons-map, "play-story"); -} -.icon-play::before { - content: map.get($icons-map, "play"); -} -.icon-poll::before { - content: map.get($icons-map, "poll"); -} -.icon-previous::before { - content: map.get($icons-map, "previous"); -} -.icon-privacy-policy::before { - content: map.get($icons-map, "privacy-policy"); -} -.icon-proof-of-ownership::before { - content: map.get($icons-map, "proof-of-ownership"); -} -.icon-quote-text::before { - content: map.get($icons-map, "quote-text"); -} -.icon-quote::before { - content: map.get($icons-map, "quote"); -} -.icon-radial-badge::before { - content: map.get($icons-map, "radial-badge"); -} -.icon-rating-icons-level1::before { - content: map.get($icons-map, "rating-icons-level1"); -} -.icon-rating-icons-level10::before { - content: map.get($icons-map, "rating-icons-level10"); -} -.icon-rating-icons-level2::before { - content: map.get($icons-map, "rating-icons-level2"); -} -.icon-rating-icons-level20::before { - content: map.get($icons-map, "rating-icons-level20"); -} -.icon-rating-icons-level3::before { - content: map.get($icons-map, "rating-icons-level3"); -} -.icon-rating-icons-level30::before { - content: map.get($icons-map, "rating-icons-level30"); -} -.icon-rating-icons-level4::before { - content: map.get($icons-map, "rating-icons-level4"); -} -.icon-rating-icons-level40::before { - content: map.get($icons-map, "rating-icons-level40"); -} -.icon-rating-icons-level5::before { - content: map.get($icons-map, "rating-icons-level5"); -} -.icon-rating-icons-level50::before { - content: map.get($icons-map, "rating-icons-level50"); -} -.icon-rating-icons-level6::before { - content: map.get($icons-map, "rating-icons-level6"); -} -.icon-rating-icons-level60::before { - content: map.get($icons-map, "rating-icons-level60"); -} -.icon-rating-icons-level7::before { - content: map.get($icons-map, "rating-icons-level7"); -} -.icon-rating-icons-level70::before { - content: map.get($icons-map, "rating-icons-level70"); -} -.icon-rating-icons-level8::before { - content: map.get($icons-map, "rating-icons-level8"); -} -.icon-rating-icons-level80::before { - content: map.get($icons-map, "rating-icons-level80"); -} -.icon-rating-icons-level9::before { - content: map.get($icons-map, "rating-icons-level9"); -} -.icon-rating-icons-level90::before { - content: map.get($icons-map, "rating-icons-level90"); -} -.icon-rating-icons-negative::before { - content: map.get($icons-map, "rating-icons-negative"); -} -.icon-readchats::before { - content: map.get($icons-map, "readchats"); -} -.icon-recent::before { - content: map.get($icons-map, "recent"); -} -.icon-refund::before { - content: map.get($icons-map, "refund"); -} -.icon-reload::before { - content: map.get($icons-map, "reload"); -} -.icon-remove-quote::before { - content: map.get($icons-map, "remove-quote"); -} -.icon-remove::before { - content: map.get($icons-map, "remove"); -} -.icon-reopen-topic::before { - content: map.get($icons-map, "reopen-topic"); -} -.icon-replace::before { - content: map.get($icons-map, "replace"); -} -.icon-replies::before { - content: map.get($icons-map, "replies"); -} -.icon-reply-filled::before { - content: map.get($icons-map, "reply-filled"); -} -.icon-reply::before { - content: map.get($icons-map, "reply"); -} -.icon-revenue-split::before { - content: map.get($icons-map, "revenue-split"); -} -.icon-revote::before { - content: map.get($icons-map, "revote"); -} -.icon-save-story::before { - content: map.get($icons-map, "save-story"); -} -.icon-saved-messages::before { - content: map.get($icons-map, "saved-messages"); -} -.icon-schedule::before { - content: map.get($icons-map, "schedule"); -} -.icon-scheduled::before { - content: map.get($icons-map, "scheduled"); -} -.icon-sd-photo::before { - content: map.get($icons-map, "sd-photo"); -} -.icon-search::before { - content: map.get($icons-map, "search"); -} -.icon-select::before { - content: map.get($icons-map, "select"); -} -.icon-sell-outline::before { - content: map.get($icons-map, "sell-outline"); -} -.icon-sell::before { - content: map.get($icons-map, "sell"); -} -.icon-send-outline::before { - content: map.get($icons-map, "send-outline"); -} -.icon-send::before { - content: map.get($icons-map, "send"); -} -.icon-settings-filled::before { - content: map.get($icons-map, "settings-filled"); -} -.icon-settings::before { - content: map.get($icons-map, "settings"); -} -.icon-share-filled::before { - content: map.get($icons-map, "share-filled"); -} -.icon-share-screen-outlined::before { - content: map.get($icons-map, "share-screen-outlined"); -} -.icon-share-screen-stop::before { - content: map.get($icons-map, "share-screen-stop"); -} -.icon-share-screen::before { - content: map.get($icons-map, "share-screen"); -} -.icon-show-message::before { - content: map.get($icons-map, "show-message"); -} -.icon-sidebar::before { - content: map.get($icons-map, "sidebar"); -} -.icon-skip-next::before { - content: map.get($icons-map, "skip-next"); -} -.icon-skip-previous::before { - content: map.get($icons-map, "skip-previous"); -} -.icon-smallscreen::before { - content: map.get($icons-map, "smallscreen"); -} -.icon-smile::before { - content: map.get($icons-map, "smile"); -} -.icon-sort-by-date::before { - content: map.get($icons-map, "sort-by-date"); -} -.icon-sort-by-number::before { - content: map.get($icons-map, "sort-by-number"); -} -.icon-sort-by-price::before { - content: map.get($icons-map, "sort-by-price"); -} -.icon-sort::before { - content: map.get($icons-map, "sort"); -} -.icon-speaker-muted-story::before { - content: map.get($icons-map, "speaker-muted-story"); -} -.icon-speaker-outline::before { - content: map.get($icons-map, "speaker-outline"); -} -.icon-speaker-story::before { - content: map.get($icons-map, "speaker-story"); -} -.icon-speaker::before { - content: map.get($icons-map, "speaker"); -} -.icon-spoiler-disable::before { - content: map.get($icons-map, "spoiler-disable"); -} -.icon-spoiler::before { - content: map.get($icons-map, "spoiler"); -} -.icon-sport::before { - content: map.get($icons-map, "sport"); -} -.icon-star::before { - content: map.get($icons-map, "star"); -} -.icon-stars-lock::before { - content: map.get($icons-map, "stars-lock"); -} -.icon-stars-refund::before { - content: map.get($icons-map, "stars-refund"); -} -.icon-stats::before { - content: map.get($icons-map, "stats"); -} -.icon-stealth-future::before { - content: map.get($icons-map, "stealth-future"); -} -.icon-stealth-past::before { - content: map.get($icons-map, "stealth-past"); -} -.icon-stickers::before { - content: map.get($icons-map, "stickers"); -} -.icon-stop-raising-hand::before { - content: map.get($icons-map, "stop-raising-hand"); -} -.icon-stop::before { - content: map.get($icons-map, "stop"); -} -.icon-story-caption::before { - content: map.get($icons-map, "story-caption"); -} -.icon-story-expired::before { - content: map.get($icons-map, "story-expired"); -} -.icon-story-priority::before { - content: map.get($icons-map, "story-priority"); -} -.icon-story-reply::before { - content: map.get($icons-map, "story-reply"); -} -.icon-strikethrough::before { - content: map.get($icons-map, "strikethrough"); -} -.icon-tag-add::before { - content: map.get($icons-map, "tag-add"); -} -.icon-tag-crossed::before { - content: map.get($icons-map, "tag-crossed"); -} -.icon-tag-filter::before { - content: map.get($icons-map, "tag-filter"); -} -.icon-tag-name::before { - content: map.get($icons-map, "tag-name"); -} -.icon-tag::before { - content: map.get($icons-map, "tag"); -} -.icon-timer::before { - content: map.get($icons-map, "timer"); -} -.icon-toncoin::before { - content: map.get($icons-map, "toncoin"); -} -.icon-trade::before { - content: map.get($icons-map, "trade"); -} -.icon-transcribe::before { - content: map.get($icons-map, "transcribe"); -} -.icon-truck::before { - content: map.get($icons-map, "truck"); -} -.icon-unarchive::before { - content: map.get($icons-map, "unarchive"); -} -.icon-underlined::before { - content: map.get($icons-map, "underlined"); -} -.icon-understood::before { - content: map.get($icons-map, "understood"); -} -.icon-unique-profile::before { - content: map.get($icons-map, "unique-profile"); -} -.icon-unlist-outline::before { - content: map.get($icons-map, "unlist-outline"); -} -.icon-unlist::before { - content: map.get($icons-map, "unlist"); -} -.icon-unlock-badge::before { - content: map.get($icons-map, "unlock-badge"); -} -.icon-unlock::before { - content: map.get($icons-map, "unlock"); -} -.icon-unmute::before { - content: map.get($icons-map, "unmute"); -} -.icon-unpin::before { - content: map.get($icons-map, "unpin"); -} -.icon-unread::before { - content: map.get($icons-map, "unread"); -} -.icon-up::before { - content: map.get($icons-map, "up"); -} -.icon-user-filled::before { - content: map.get($icons-map, "user-filled"); -} -.icon-user-online::before { - content: map.get($icons-map, "user-online"); -} -.icon-user-stars::before { - content: map.get($icons-map, "user-stars"); -} -.icon-user::before { - content: map.get($icons-map, "user"); -} -.icon-video-outlined::before { - content: map.get($icons-map, "video-outlined"); -} -.icon-video-stop::before { - content: map.get($icons-map, "video-stop"); -} -.icon-video::before { - content: map.get($icons-map, "video"); -} -.icon-view-once::before { - content: map.get($icons-map, "view-once"); -} -.icon-voice-chat::before { - content: map.get($icons-map, "voice-chat"); -} -.icon-volume-1::before { - content: map.get($icons-map, "volume-1"); -} -.icon-volume-2::before { - content: map.get($icons-map, "volume-2"); -} -.icon-volume-3::before { - content: map.get($icons-map, "volume-3"); -} -.icon-warning::before { - content: map.get($icons-map, "warning"); -} -.icon-web::before { - content: map.get($icons-map, "web"); -} -.icon-webapp::before { - content: map.get($icons-map, "webapp"); -} -.icon-word-wrap::before { - content: map.get($icons-map, "word-wrap"); -} -.icon-zoom-in::before { - content: map.get($icons-map, "zoom-in"); -} -.icon-zoom-out::before { - content: map.get($icons-map, "zoom-out"); -} diff --git a/src/styles/index.scss b/src/styles/index.scss index 548b83c55..2f99c1804 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,14 +5,13 @@ @use "mixins"; @use "spacing"; @use "forms"; -@use "icons"; +@use "icons.css"; +@use "icons" as iconsMixins; @use "common"; @use "print"; -@use "fonts"; html, body { - --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family-monospace: "Cascadia Mono", "Roboto Mono", "Droid Sans Mono", 'SF Mono', "Menlo", "Ubuntu Mono", @@ -234,6 +233,10 @@ body:not(.is-ios) { touch-action: none; } +.icon { + @include iconsMixins.icon; +} + .emoji-small { overflow: hidden; display: inline-block;