CODEWITHSUNDEEP
javascriptcsssvg
benjgorman
benjgorman

Reputation: 722

How to get Grunticon 'data-grunticon-embed' option embedding working

I'm having issues with data-grunticon-embed from grunticon. https://github.com/filamentgroup/grunticon

I've tried running it locally and on my webserver and nothing seems to give in either Chrome or Safari.

My Gruntfile.js

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        grunticon: {
            myIcons: {
                    files: [{
                        expand: true,
                        cwd: 'grunt/svgs',
                        src: ['*.svg', '*.png'],
                        dest: "grunt/output"
                    }],
                options: {
                    loadersnippet: "grunticon.loader.js",
                    enhanceSVG: true,
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-grunticon');
    grunt.registerTask('default', ['grunticon:myIcons']);
};

In my header I've got 

<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
        window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
        grunticon(["<?php echo get_template_directory_uri(); ?>/grunt/output/icons.data.svg.css", "<?php echo get_template_directory_uri(); ?>/grunt/output/icons.data.png.css", "<?php echo get_template_directory_uri(); ?>/grunt/output/icons.fallback.css"], grunticon.svgLoadedCallback );
        </script>
<noscript><link href="<?php echo get_template_directory_uri(); ?>/grunt/output/icons.fallback.css" rel="stylesheet"></noscript>

and on my page I'm using this, icon appears fine but isn't embedded with svg data.

<div class="icon-twitter" style="width: 50px; height: 50px; background-size:50%;" data-grunticon-embed></div></a>

UPDATE:

Still no joy with this. I have it running on my server now http://benjgorman.com/ the icons in the footer/nav are svg. I can tell that the browser is getting the SVG data as I can see it in the console, but it's not inline on the page so it's not style-able.

Console information

Inspect element on same icon

Upvotes: 3

Views: 1038

Answers (1)

benjgorman
benjgorman

Reputation: 722

Turns out that as I followed an outdated tutorial, I was using the wrong version of Grunticon. My package.json now looks like the following which is what was required to be modified. After this everything works fine.

{
    "name": "my-grunticon-test",
    "version": "0.1.0",
    "dependencies": {
        "grunt": "~0.4.4",
        "grunt-grunticon": "~2.2.1"

    }
}

Upvotes: 1

Related Questions