Create a gist now

Instantly share code, notes, and snippets.

A very rough proof of concept for working with inline SVG and angular. See blog post for details http://www.gedankentank.com/2014/01/blue-sky-thinking-about-svg-and-angular/ The icons have been taken from the awesome http://iconmonstr.com/.
<!DOCTYPE html>
<html ng-app="ollie-demo-app">
<head>
<script src="http://code.angularjs.org/1.2.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
/*
.icon-state path {
fill: #666;
}
.icon-state.mouseenter path {
fill: #333;
}
.icon-state.mousedown path {
fill: #000;
}
*/
</style>
</head>
<body>
<ng-ollie-icon width="128" height="128">
<ng-ollie-icon-state triggers="default mouseleave">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="rocket-8-icon" d="M269.418,462c55.074-28.27,87.182-89.014,83.71-131.721c-22.055,14.989-59.403,33.205-79.173,39.447
C296.102,404.973,290.133,434.461,269.418,462z M142.36,238.132c6.243-19.771,24.46-57.118,39.448-79.173
C139.1,155.484,78.359,187.594,50.088,242.67C77.625,221.955,107.115,215.984,142.36,238.132z M251.464,345.998l-85.294-85.295
c32.542-98.504,127.049-222.775,294.613-209.76C474.934,218.625,353.33,310.238,251.464,345.998z M311.134,233.413
c8.964-8.964,8.964-23.497,0-32.461c-8.965-8.962-23.496-8.962-32.461,0.004c-8.962,8.962-8.964,23.494,0,32.457
C287.637,242.377,302.17,242.377,311.134,233.413z M385.043,180.601c14.791-14.788,14.793-38.771,0.002-53.56
s-38.771-14.789-53.561,0c-14.791,14.791-14.789,38.77,0,53.561C346.275,195.391,370.253,195.391,385.043,180.601z M221.334,359.653
c-24.438,45.249-71.34,78.444-140.329,68.243c-9.615-65.026,24.423-112.088,72.212-136.361l14.76,14.762
c-52.904,24.277-56.355,68.723-52.805,87.521c19.368,3.604,67.054,1.286,91.55-48.776L221.334,359.653z"/>
</svg>
</ng-ollie-icon-state>
<ng-ollie-icon-state triggers="mouseenter mouseup">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="rocket-7-icon" d="M460.783,50.943C293.219,37.928,198.712,162.199,166.17,260.703l85.294,85.295
C353.33,310.238,474.934,218.625,460.783,50.943z M311.134,233.413c-8.964,8.964-23.497,8.964-32.461,0
c-8.964-8.963-8.962-23.495,0-32.457c8.965-8.966,23.496-8.966,32.461-0.004C320.098,209.916,320.098,224.449,311.134,233.413z
M385.043,180.601c-14.79,14.79-38.768,14.79-53.559,0.001c-14.789-14.791-14.791-38.77,0-53.561
c14.789-14.789,38.77-14.789,53.561,0S399.834,165.812,385.043,180.601z M191.949,330.593l16.081,16.081
c-14.969,15.152-30.29,33.098-36.317,57.774l-22.09-5.396C157.057,368.664,175.156,347.573,191.949,330.593z M165.998,304.642
l16.042,16.042c-17.783,17.514-38.328,34.997-68.421,42.361l-5.4-22.091C132.902,334.924,150.949,319.512,165.998,304.642z
M50.088,242.67c28.271-55.076,89.012-87.186,131.721-83.711c-14.988,22.055-33.205,59.402-39.448,79.173
C107.115,215.984,77.625,221.955,50.088,242.67z M209.631,407.053c3.266,32.244-15.039,51.883-39.418,54.353
c-14.336,1.466-27.031-3.25-37.436-13.982c-25.016,8.832-48.826-0.755-61.393-18.618c-9.865-14.021-12.064-31.801-6.053-48.829
c-10.748-10.417-15.453-23.011-13.98-37.436c2.447-24.166,21.637-42.812,55.361-39.311l3.34,19.172
c-11.393,1.071-21.92,1.665-28.74,8.481c-11.465,11.469-8.02,35.415,13.51,41.764c-14.277,14.349-12.898,34.97-2.178,46.283
c11.234,11.857,32.678,13.713,47.463-1c6.604,22.396,30.859,24.412,41.762,13.51c6.73-6.729,7.396-17.079,8.439-28.311
L209.631,407.053z M353.128,330.279C356.6,372.986,324.492,433.73,269.418,462c20.715-27.539,26.684-57.027,4.537-92.273
C293.725,363.484,331.073,345.269,353.128,330.279z"/>
</svg>
</ng-ollie-icon-state>
<ng-ollie-icon-state triggers="mousedown">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="rocket-10-icon" d="M269.418,462c55.074-28.27,87.182-89.014,83.71-131.721c-22.055,14.989-59.403,33.205-79.173,39.447
C296.102,404.973,290.133,434.461,269.418,462z M142.36,238.132c6.243-19.771,24.46-57.118,39.448-79.173
C139.1,155.484,78.359,187.594,50.088,242.67C77.625,221.955,107.115,215.984,142.36,238.132z M251.464,345.998l-85.294-85.295
c32.542-98.504,127.049-222.775,294.613-209.76C474.934,218.625,353.33,310.238,251.464,345.998z M311.134,233.413
c8.964-8.964,8.964-23.497,0-32.461c-8.965-8.962-23.496-8.962-32.461,0.004c-8.962,8.962-8.964,23.494,0,32.457
C287.637,242.377,302.17,242.377,311.134,233.413z M385.043,180.601c14.791-14.788,14.793-38.771,0.002-53.56
s-38.771-14.789-53.561,0c-14.791,14.791-14.789,38.77,0,53.561C346.275,195.391,370.253,195.391,385.043,180.601z M91.528,380.141
l-15.557-15.557l75.667-75.666l15.557,15.557L91.528,380.141z M169.361,417.974l-15.557-15.557l55.667-55.666l15.557,15.557
L169.361,417.974z M89.361,440.307L73.805,424.75l87.501-87.499l15.557,15.557L89.361,440.307z"/>
</svg>
</ng-ollie-icon-sate>
</ng-ollie-icon>
</body>
</html>
angular.module('ollie-demo-app', ['ng-ollie']).config(function() {
console.log('App started');
});
angular.module('ng-ollie', [])
.directive('ngOllieIcon', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
width: '@',
height: '@'
},
controller: function($scope, $element) {
var states = $scope.states = [];
$scope.activateState = function(newState) {
angular.forEach(states, function(state) {
state.isActive = false;
});
newState.isActive = true;
$element.find('svg').css({'width': $scope.width +'px', 'height': $scope.height +'px'});
};
this.addState = function(iconState) {
states.push(iconState);
if (iconState.triggers.indexOf('default')!=-1) {
$scope.activateState(iconState);
}
$element.on(iconState.triggers, function () {
iconState.$apply(function() {
$scope.activateState(iconState);
});
});
};
},
template: '<div class="ollie-icon" style="width:{{width}}px; height:{{height}}px;" ng-transclude></div>'
};
})
.directive('ngOllieIconState', function() {
return {
require: '^ngOllieIcon',
restrict: 'E',
transclude: true,
replace: true,
scope: {
triggers: '@'
},
link: function(scope, element, attrs, iconCtrl) {
scope.isActive = false;
iconCtrl.addState(scope);
},
template: '<div class="icon-state {{triggers}}" ng-show="isActive" ng-transclude></div>'
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment