dependency on unpkg

[andrevenancio]

First off, let me start by saying that the level of detail for this icons is insane and I'm all so grateful. ❤️

However depending on unpkg.com or any other CDN to be honest to serve the icons is not ideal. As some mention on previous tickets you can't have them if your connection drops or if the CDN is down, which is the case at the moment of writting this issue.

https://www.dropbox.com/s/ntlwzifbnbfcjsv/Screenshot%202018-12-20%2023.46.01.png?dl=0

Anyone using ionicons either the icon font or the web component have their website / app in limbo.

Since this is on npm, I wonder if it would be a good option to be able to import the icons we need and let them be imported using webpack or rollup or whatever the user is using.

Imagining a React scenario I can see this working:

import React, { PureComponent } from 'react';
import { getIcon } from 'ionicons';

const PageIcon = getIcon('page');

const example = props => (
    <div>
        <PageIcon />
    </div>
);

[nicbarker]

Hi mate,
Just to let you know, I've got this exact setup working quite well, although just be warned that it's leaning on webpack to do the lifting at compile time.

Basic strategy is as follows:

npm install --save-dev ionicons react-svg-loader

webpack.config.js

    module: {
        rules: [
            { test: /\.svg$/, use: [ { loader: "babel-loader" }, { loader: "react-svg-loader" } ] }
        ]
    }

react component

import Checkmark from 'ionicons/dist/ionicons/svg/ios-checkmark-circle.svg'

render () {
    return <Checkmark width={50} height={50} />
}

The components will just render as standard <svg> tags into the dom. This approach (using --save-dev is important) will mean that webpack will only bundle the svg files that you're actually importing, see attached screenshot (I'm using two icons)

[corysimmons]

Non-bundling solution here 👉#646 (comment)

[christian-bromann]

Consolidating into #1448

[corysimmons]

Thanks for the prompt response!