grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-svgstore');
grunt.initConfig({
}
},
+ svgstore: {
+ options: {
+ cleanup: true
+ },
+ sprite: {
+ files: {
+ 'dist/img/sprite.svg': [
+ 'img/mo.svg'
+ ]
+ }
+ }
+ },
+
watch: {
copy: {
files: [ 'html/**/*.html' ],
less: {
files: [ 'less/**/*.less' ],
tasks: [ 'less' ]
+ },
+ svgstore: {
+ files: [ 'img/**/*.svg' ],
+ tasks: [ 'svgstore' ]
}
}
});
- grunt.registerTask('default', [ 'copy', 'less' ]);
+ grunt.registerTask('default', [ 'copy', 'less', 'svgstore' ]);
};
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<body>
<header>
- <h2>yourSHOUTER - Startseite</h2>
+ <h2>
+ <svg>
+ <use xlink:href="../../img/sprite.svg#mo"></use>
+ </svg>
+ <span>Simple Example-Project for Template-Development</span>
+ </h2>
<hr />
<!-- Navigation -->
<nav id="menu" class="navbar navbar-submenu navbar-fixed-top">
--- /dev/null
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.6 70.6" version="1.1"><g transform="translate(-95.049215,-379.90879)"><path d="m95 379.9c0 25.5 0 48 0 70.6 45.9 0 90.1 0 130.6 0 0-21.8 0-43.5 0-65.3l0-5.3c-44.9 0-89 0-130.6 0zm18.2 10.6 34.3 0-17.2 17.2zm52.5 0 49.4 0 0 49.4-49.4 0zm24.7 6c-10.3 0-18.7 8.4-18.7 18.7 0 10.3 8.4 18.7 18.7 18.7 10.3 0 18.7-8.4 18.7-18.7 0-10.3-8.4-18.7-18.7-18.7zm-84.7 1.5c8.2 8.2 16.5 16.5 24.7 24.7 8.2-8.2 16.5-16.5 24.7-24.7l0 41.9-49.4 0zm84.7 9.1c4.5 0 8.1 3.6 8.1 8.1 0 4.5-3.5 8.1-8.1 8.1-4.5 0-8.1-3.5-8.1-8.1 0-4.5 3.5-8.1 8.1-8.1z" style="fill:#000"/></g></svg>
border-color: @normal;
clear: both;
}
+svg
+{
+ fill: currentColor;
+}
+
header
{
margin-bottom: 3em;
+ > h2 > svg
+ {
+ position: relative;
+ top: .2em;
+ height: 1.25em;
+ width: 2.5em;
+ }
}
nav
{
{
"name": "frontend",
- "version": "1.0.0",
+ "version": "1.0.1",
"description": "Simple Example-Project for Template-Development",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-copy": "~0.8.1",
"grunt-contrib-less": "~1.0.1",
- "grunt-contrib-watch": "~0.6.1"
+ "grunt-contrib-watch": "~0.6.1",
+ "grunt-svgstore": "~0.5.0"
}
}