search

ionic-team / ionicons

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
http://ionicons.com
MIT License
17.4k stars 2.06k forks source link

USING THE ICONS IN OFFLINE WEBSITE #821

Open fkaris opened 4 years ago

fkaris commented 4 years ago

Hello team, thank you for the good work, unfortunately i am unable to find a solution to using ionicons offline here is my code and the preview. any guidance is welcome thanks.

image

image

Which file do i refrence to get them to work offline? image

ni-vo commented 4 years ago

What does your network tab in dev tools show when you try to load an icon?

fkaris commented 4 years ago

here you go. image

julianflapper commented 4 years ago

@fkaris This works for me:

<script type="module" src="node_modules/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="node_modules/ionicons/dist/ionicons/ionicons.js"></script>
mutoe commented 3 years ago

You can just copy the node_modules/ionicons/dist/ionicons to your public folder, and add following code in your index.html

<script src="/ionicons/ionicons.esm.js" type="module"></script>
<script nomodule src="/ionicons/ionicons.js"></script>

It's work fine for me.

salim-b commented 3 years ago

Regarding the 2nd script tag with the nomodule attribute (fallback for older browsers without ES6 modules support): Since Ionicons v5.3.0 the file node_modules/ionicons/dist/ionicons/ionicons.js is not present anymore. Was the fallback simply removed meanwhile or was it moved to a different file? The official instructions only mention v4.7.4 which still included this file. Last version that included the file seems to be 5.2.3.

dwilches commented 2 years ago

The proposed solution to copy the node_modules/iconicons/dist folder to the assets folder is still accessing the server via Internet, just that it's our own server instead of the unpkg.com server. You can see the GET requests for individual icons in the DevTools, which happen only at the moment the icon needs to be displayed (in a SPA app, this can be even after the app's code has been downloaded and we started working offline).

Is there a way to use an icon font as we used to be able in version 4? Like this:

  <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

So it is a single download.

DeanCMS commented 2 months ago

Help...

DeanCMS commented 2 months ago

Seems impossible to preload ionicons for offline usage. Switching to Font Awesome. Thanks

image