Always render svg icons inline

This commit is contained in:
Joe Fiorini
2015-04-30 11:02:36 -04:00
parent 324b0250fc
commit 02ac45e4c4
2 changed files with 11 additions and 21 deletions

View File

@@ -2,7 +2,7 @@
<nav class="SetupMenu Container-main">
<a href="#/credentials" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Credentials" inline></aw-icon>
<aw-icon name="Credentials"></aw-icon>
</i>
<div class="Media-body">
<h4 class="SetupItem-title">Credentials</h4>
@@ -11,7 +11,7 @@
</a>
<a href="#/users" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Users" inline></aw-icon>
<aw-icon name="Users"></aw-icon>
</i>
<div class="Media-body">
<h4 class="SetupItem-title">Users</h4>
@@ -22,7 +22,7 @@
</a>
<a href="#/teams" class="SetupItem HoverIcon Media">
<i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
<aw-icon name="Teams" inline></aw-icon>
<aw-icon name="Teams"></aw-icon>
</i>
<div class="Media-block">
<h4 class="SetupItem-title">Teams</h4>

View File

@@ -3,32 +3,22 @@ export default function() {
restrict: 'E',
templateUrl: '/static/js/shared/icon/icon.partial.html',
scope: {
isInline: '@inline'
},
link: function(scope, element, attrs) {
var svg = $('svg', element);
var iconPath = '#' + attrs.name;
scope.isInline = scope.isInline === "true";
// Make a copy of the <symbol> tag to insert its contents into this
// element's svg tag
var content = $(iconPath).clone();
if(angular.isDefined(attrs.inline)) {
// Make a copy of the <symbol> tag to insert its contents into this
// element's svg tag
var content = $(iconPath).clone();
// Copy classes off the <symbol> so that we preserve any styling
// when we copy the item inline
var classes = $(iconPath).attr('class');
// Copy classes off the <symbol> so that we preserve any styling
// when we copy the item inline
var classes = $(iconPath).attr('class');
svg.attr('class', classes)
.html(content.contents());
svg.attr('class', classes)
.html(content.contents());
} else {
// Using string concatenation here because <use> needs to be
// generated without a close tag, but jQuery will NOT allow us
// to create it without a closing tag :(
var use = '<use xlink:href="' + iconPath + '">';
svg.html(use);
}
}
};
}