github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-04-13 08:36:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use currentColor in SVGs (#997)

Browse source 
If you include a SVG directly into the DOM (what we do here), then currentColor is the current text color. This is way more convenient than changing the SVG file.
This doesn't work if you load the SVG with an IMG-Tag.

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-31 19:42:31 +01:00 • committed by GitHub
parent dece87b7b8
commit c862ca341f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/editor/app-bar/sync-scroll-buttons/disabledScroll.svg
View file

@ -1 +1,9 @@
<svg height="512" viewBox="0 0 135.46666 135.46666" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(253.17277 890.86874)"><path d="m-185.60701-890.86598c-1.20278.0405-2.35129.51236-3.23554 1.33104l-19.83931 18.35901c-2.0321 1.88196-2.16416 5.08233-.29441 7.12658 1.86949 2.04457 5.06645 2.17956 7.10004.29914l16.43678-15.21017 16.43678 15.21017c2.03361 1.88043 5.23055 1.74545 7.10004-.29914 1.86889-2.04514 1.73629-5.24555-.29677-7.12658l-19.83694-18.35901c-.96887-.89698-2.25281-1.37483-3.57067-1.33104z"/><path d="m-205.48644-783.84278c-1.28698.0542-2.55509.59901-3.48983 1.62131-1.86975 2.04426-1.73769 5.24463.29441 7.12659l19.83931 18.359c.88425.81868 2.03276 1.29062 3.23554 1.33104 1.31786.0439 2.6018-.43406 3.57067-1.33104l19.83694-18.359c2.03306-1.88102 2.16566-5.08144.29677-7.12659-1.86949-2.04459-5.06643-2.17956-7.10004-.29913l-16.43678 15.21017-16.43678-15.21017c-1.01679-.94021-2.32321-1.37647-3.61021-1.32218z"/><path d="m-185.49136-841.40292a18.267478 18.267478 0 0 0 -18.21562 18.26754 18.267478 18.267478 0 0 0 .23777 2.93583l22.52379-20.64169a18.267478 18.267478 0 0 0 -4.49402-.56168 18.267478 18.267478 0 0 0 -.0519 0zm18.08169 15.33288-22.5232 20.64052a18.267478 18.267478 0 0 0 4.49343.56168 18.267478 18.267478 0 0 0 18.26754-18.26754 18.267478 18.267478 0 0 0 -.23777-2.93466z" fill-rule="evenodd"/><path d="m-124.79368-883.92129-126.14511 116.28534 4.95067 5.40084 126.14688-116.28534z"/></g></svg>
<svg height="512" viewBox="0 0 135.46666 135.46666" width="512" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" transform="translate(253.17277 890.86874)">
<path d="m-185.60701-890.86598c-1.20278.0405-2.35129.51236-3.23554 1.33104l-19.83931 18.35901c-2.0321 1.88196-2.16416 5.08233-.29441 7.12658 1.86949 2.04457 5.06645 2.17956 7.10004.29914l16.43678-15.21017 16.43678 15.21017c2.03361 1.88043 5.23055 1.74545 7.10004-.29914 1.86889-2.04514 1.73629-5.24555-.29677-7.12658l-19.83694-18.35901c-.96887-.89698-2.25281-1.37483-3.57067-1.33104z"/>
<path d="m-205.48644-783.84278c-1.28698.0542-2.55509.59901-3.48983 1.62131-1.86975 2.04426-1.73769 5.24463.29441 7.12659l19.83931 18.359c.88425.81868 2.03276 1.29062 3.23554 1.33104 1.31786.0439 2.6018-.43406 3.57067-1.33104l19.83694-18.359c2.03306-1.88102 2.16566-5.08144.29677-7.12659-1.86949-2.04459-5.06643-2.17956-7.10004-.29913l-16.43678 15.21017-16.43678-15.21017c-1.01679-.94021-2.32321-1.37647-3.61021-1.32218z"/>
<path d="m-185.49136-841.40292a18.267478 18.267478 0 0 0 -18.21562 18.26754 18.267478 18.267478 0 0 0 .23777 2.93583l22.52379-20.64169a18.267478 18.267478 0 0 0 -4.49402-.56168 18.267478 18.267478 0 0 0 -.0519 0zm18.08169 15.33288-22.5232 20.64052a18.267478 18.267478 0 0 0 4.49343.56168 18.267478 18.267478 0 0 0 18.26754-18.26754 18.267478 18.267478 0 0 0 -.23777-2.93466z"
fill-rule="evenodd"/>
<path d="m-124.79368-883.92129-126.14511 116.28534 4.95067 5.40084 126.14688-116.28534z"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

8
src/components/editor/app-bar/sync-scroll-buttons/enabledScroll.svg
View file

@ -1 +1,7 @@
<svg height="512" viewBox="0 0 135.46666 135.46666" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="#545b62"><path d="m67.566309.00276674c-1.20278.040417-2.35129.512357-3.23555 1.33103706l-19.83929 18.3589962c-2.0321 1.881973-2.16417 5.082332-.29442 7.126588 1.8695 2.044576 5.06646 2.17955 7.10005.29913l16.43677-15.210163 16.43678 15.210163c2.03361 1.880432 5.23055 1.745458 7.10004-.29913 1.86889-2.045147 1.73629-5.24555-.29677-7.126588l-19.83693-18.3589962c-.96887-.89697906-2.25281-1.37483336-3.57068-1.33103706z"/><path d="m47.686889 107.02594c-1.28698.0542-2.55509.59903-3.48984 1.62132-1.86975 2.04426-1.73768 5.24462.29442 7.12659l19.83929 18.359c.88426.81868 2.03277 1.29062 3.23555 1.33104 1.31787.0438 2.60181-.43406 3.57068-1.33104l19.83693-18.359c2.03306-1.88103 2.16566-5.08144.29677-7.12659-1.86949-2.0446-5.06643-2.17956-7.10004-.29913l-16.43678 15.21016-16.43677-15.21016c-1.01679-.94021-2.32322-1.37647-3.61021-1.32219z"/><circle cx="67.733864" cy="67.733284" fill-rule="evenodd" r="18.267477"/></g></svg>
<svg height="512" viewBox="0 0 135.46666 135.46666" width="512" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor">
<path d="m67.566309.00276674c-1.20278.040417-2.35129.512357-3.23555 1.33103706l-19.83929 18.3589962c-2.0321 1.881973-2.16417 5.082332-.29442 7.126588 1.8695 2.044576 5.06646 2.17955 7.10005.29913l16.43677-15.210163 16.43678 15.210163c2.03361 1.880432 5.23055 1.745458 7.10004-.29913 1.86889-2.045147 1.73629-5.24555-.29677-7.126588l-19.83693-18.3589962c-.96887-.89697906-2.25281-1.37483336-3.57068-1.33103706z"/>
<path d="m47.686889 107.02594c-1.28698.0542-2.55509.59903-3.48984 1.62132-1.86975 2.04426-1.73768 5.24462.29442 7.12659l19.83929 18.359c.88426.81868 2.03277 1.29062 3.23555 1.33104 1.31787.0438 2.60181-.43406 3.57068-1.33104l19.83693-18.359c2.03306-1.88103 2.16566-5.08144.29677-7.12659-1.86949-2.0446-5.06643-2.17956-7.10004-.29913l-16.43678 15.21016-16.43677-15.21016c-1.01679-.94021-2.32322-1.37647-3.61021-1.32219z"/>
<circle cx="67.733864" cy="67.733284" fill-rule="evenodd" r="18.267477"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB