Created
May 20, 2016 11:13
-
-
Save guptasanchit90/27b34596d2cce6ae1ec97dac3dd055fe to your computer and use it in GitHub Desktop.
Directive to load SVG images from withing the code in Angular.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app = angular.module('MainApp', ['ngMaterial']); | |
var icons = { | |
refresh: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z", | |
share: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" | |
}; | |
app.directive('svgIcon', function() { | |
function link(scope, element, attrs) { | |
scope.$watch(attrs.state, function(newValue) { | |
if (newValue === false) { | |
element.css({ | |
'opacity': '.4' | |
}); | |
} else { | |
element.css({ | |
'opacity': '1' | |
}); | |
} | |
}); | |
function build(icon, fill, size) { | |
return '<svg class="svg_icon" viewBox="0 0 24 24" height="' + size + '" width="' + size + '">' + '<path d="' + icons[icon] + '" fill="' + fill + '"/>' + '</svg>'; | |
} | |
function renderSVG() { | |
var size = 36; | |
var fill = "#FFF"; | |
if (attrs.size) { | |
size = attrs.size; | |
} | |
if (attrs.fill) { | |
fill = attrs.fill; | |
} | |
element.html(build(attrs.path, fill, size)); | |
} | |
renderSVG(); | |
} | |
return { | |
link: link, | |
restrict: 'E' | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment