Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace External Font Awesome with Local SVG #296

Merged
merged 1 commit into from
Nov 26, 2021

Conversation

hswong3i
Copy link
Contributor

@hswong3i hswong3i commented Nov 26, 2021

Existing implementation reuse Font Awesome icons and spinner animation effect for simpler implementation. But this also lead to additional dependency which make 3rd party integration become harder.

For example, in case of integrating Leaflet.Locate into Drupal Leaflet module, the use of Font Awesome for icon introduce additional dependency to the needs of Drupal Font Awesome.

Sometime user may even hope to use a newer/older version of Font Awesome in their project, different than that well tested by ourselves.

This PR decouple above issue by:

  • Locally vendor Font Awesome v5.15.4 location-arrow-solid.svg and spinner-solid.svg
  • Implement our own independent SCSS as similar as original design provided by Font Awesome
  • Simplify demo and README.md with above changes

Online demo: https://drustack.github.io/domoritz-leaflet-locatecontrol/demo/

Fix #293

Signed-off-by: Wong Hoi Sing Edison hswong3i@pantarei-design.com

@hswong3i hswong3i force-pushed the local_svg_icon branch 2 times, most recently from fabb773 to 97b8ef6 Compare November 26, 2021 13:07
Copy link
Owner

@domoritz domoritz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you. Just a few small changes.

src/L.Control.Locate.scss Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
Existing implementation reuse Font Awesome icons and spinner animation
effect for simpler implementation. But this also lead to additional
dependency which make 3rd party integration become harder.

For example, in case of integrating Leaflet.Locate into [Drupal
Leaflet](https://www.drupal.org/project/leaflet) module, the use of Font
Awesome for icon introduce additional dependency to the needs of [Drupal
Font Awesome](https://www.drupal.org/project/fontawesome).

Sometime user may even hope to use a newer/older version of Font Awesome
in their project, different than that well tested by ourselves.

This PR decouple above issue by:

  - Locally vendor Font Awesome v5.15.4 `location-arrow-solid.svg` and
    `spinner-solid.svg`
  - Implement our own independent SCSS as similar as original design
    provided by Font Awesome
  - Simplify demo and README.md with above changes

Fix domoritz#293

Signed-off-by: Wong Hoi Sing Edison <hswong3i@pantarei-design.com>
@domoritz domoritz merged commit b8167b9 into domoritz:gh-pages Nov 26, 2021
hswong3i added a commit to drustack/brunob-leaflet.fullscreen that referenced this pull request Nov 29, 2021
Existing implementation using `icon-fullscreen.png` and
`icon-fullscreen-2x.png` for different screen (e.g. iOS with retina
display). Moreover, we don't have any toggle effect for the icon status.

This PR rework the icon with:
* Locally vendor Font Awesome v5.15.4 `compress-solid.svg` and
  `expand-solid.svg`
* Add default content for icon
* Add toggle status for icon
* Rework style with SCSS
* Create minified version JS and CSS
* Simplify demo and README.md with above changes

Some style reuse from: domoritz/leaflet-locatecontrol#296

Online demo: https://drustack.github.io/brunob-leaflet.fullscreen/

Fix brunob#87

Signed-off-by: Wong Hoi Sing Edison <hswong3i@pantarei-design.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FontAwesome 5
2 participants