我在从grunticon嵌入数据grunticon时遇到问题。 https://github.com/filamentgroup/grunticon
我尝试在本地和Web服务器上运行它，但Chrome或Safari似乎都没有任何帮助。
我的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']);
};
在标题中，我有
<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>
并且在我正在使用的页面上，图标看起来很好，但未嵌入svg数据。
<div class="icon-twitter" style="width: 50px; height: 50px; background-size:50%;" data-grunticon-embed></div></a>更新:
对此仍然没有喜悦。我现在在服务器上运行它http://benjgorman.com/页脚/导航中的图标为svg。我可以告诉我浏览器正在获取SVG数据，正如我在控制台中看到的那样，但是它不在页面上内联，因此无法设置样式。
最佳答案
事实证明，当我遵循过时的教程时，我使用的是错误版本的Grunticon。现在，我的package.json如下所示，这是需要修改的内容。之后，一切正常。
{
"name": "my-grunticon-test",
"version": "0.1.0",
"dependencies": {
"grunt": "~0.4.4",
"grunt-grunticon": "~2.2.1"
}
}
关于javascript - 如何获得Grunticon 'data-grunticon-embed'选项嵌入工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31842494/