Ionicons: Chrome says Deprecated script, please remove

Created on 1 Sep 2019 · 7Comments · Source: ionic-team/ionicons

Chrome gives

[ionicons] Deprecated script, please remove: <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
To improve performance it is recommended to set the differential scripts in the head as follows:
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Please update usage doc to mention how to use ionicons without getting this warning. Thanks!

Source

mariusa

👍15 👀5

Most helpful comment

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> works just fine

zb0t on 18 Feb 2020

👍5 🎉1

All 7 comments

the 2 different script doesn't seems to work... any idea on how to fix this?

HeinDiez on 18 Nov 2019

It is not message by Chrome but Ionicons itself.

iBobik on 4 Jan 2020

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> works just fine

zb0t on 18 Feb 2020

👍5 🎉1

Btw, in Vue projects Ionic should not include icons like this (from CDN) because icons are compiled in by webpack.

2020 v 8:14, Zachary Botterman notifications@github.com:

works just fine

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

iBobik on 18 Feb 2020

also bumped into this in my nuxt project

carlflor on 21 Jun 2020

@carlflor the workaround i did to solve the problem was to npm install ionicons or react-icons

from there on you can import any icons you want to use.

HeinDiez on 22 Jun 2020

i'm getting the same because the included file, for whatever reason, contains the following:

(function(doc){
  var scriptElm = doc.scripts[doc.scripts.length - 1];
  var warn = ['[ionicons] Deprecated script, please remove: ' + scriptElm.outerHTML];

  warn.push('To improve performance it is recommended to set the differential scripts in the head as follows:')

  var parts = scriptElm.src.split('/');
  parts.pop();
  parts.push('ionicons');
  var url = parts.join('/');

  var scriptElm = doc.createElement('script');
  scriptElm.setAttribute('type', 'module');
  scriptElm.src = url + '/ionicons.esm.js';
  warn.push(scriptElm.outerHTML);
  scriptElm.setAttribute('data-stencil-namespace', 'ionicons');
  doc.head.appendChild(scriptElm);


  scriptElm = doc.createElement('script');
  scriptElm.setAttribute('nomodule', '');
  scriptElm.src = url + '/ionicons.js';
  warn.push(scriptElm.outerHTML);
  scriptElm.setAttribute('data-stencil-namespace', 'ionicons');
  doc.head.appendChild(scriptElm)

  console.warn(warn.join('\n'));

})(document);

which is perplexing given the instructions to simply paste <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script> into the html.

i need to package ionicons with webpack and self-host everything and simply cannot find a way of having them work with the distributed code. i tried packaging ionicons, ionicons/dist/ionicons, ionicons/dist/cjs, ionicons/dist/esm... nothing works. the only thing that works is <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> which, like i said above, is no option for my case.