jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: switch to SVG sprites for icons.

Browse Source 
Switch to using SVG sprites for icons, instead of using a combination of icon fonts and inline SVG elements.

This means there's a single icons.svg file containing all icons, and icons are referenced like
`<svg><use href="/icons.svg#arrow-alt-up"/></svg>`.

This should make icons more efficient since a) it replaces an 80kb icon font file with a 8kb SVG
file and b) it replaces repeated inline copies of the same icon with references to the sprite sheet.
This most notably affects the upvote and downvote buttons.

This also updates icons from Font Awesome 5 to Font Awesome 6, which fixes a few minor icon
alignment issues in some places.

ref: https://fontawesome.com/docs/web/add-icons/svg-sprites
This commit is contained in:
evazion
2022-12-11 01:12:41 -06:00
parent 20a2652c1e
commit da6a61b4e7
8 changed files with 247 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/packs/application.js
View File

@@ -26,10 +26,6 @@ require("jquery-ui/themes/base/button.css");
require("jquery-ui/themes/base/dialog.css");
require("jquery-ui/themes/base/theme.css");
require("@fortawesome/fontawesome-free/css/fontawesome.css");
require("@fortawesome/fontawesome-free/css/solid.css");
require("@fortawesome/fontawesome-free/css/regular.css");
importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/));
importAll(require.context('../src/styles', true, /\.s?css(?:\.erb)?$/));
importAll(require.context('../../components', true, /\.s?css(?:\.erb)?$/));

24
app/javascript/src/styles/common/dtext.scss
View File

@@ -94,21 +94,15 @@ div.prose {
}
a.dtext-named-external-link::after {
// https://fontawesome.com/icons/external-link-alt?style=solid
// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35d";
font-size: 0.6em;
padding: 0 0.2em 0 0.3em;
vertical-align: 1px;
// https://stackoverflow.com/a/66093928
content: "";
padding: 0 0.275em;
margin: 0 0.25rem;
vertical-align: -0.125em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'%3E%3C/path%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
background-color: currentColor;
}
a.dtext-wiki-does-not-exist, a.dtext-tag-does-not-exist, a.dtext-artist-does-not-exist {

2
app/javascript/src/styles/specific/posts.scss
View File

@@ -56,7 +56,7 @@ div#c-posts {
}
}
form#remove-fav-button button:not([disabled]) i.icon {
form#remove-fav-button button:not([disabled]) .icon {
color: var(--remove-favorite-button);
}