Muhammad

Abid

Technical Lead


AngularJS SVG Icon Directive

July 26, 2016Muhammad Abid0 Comments

svg-icon-directive

 angular
    .module('ma-directives')
    .directive('maSvgIcon', maSvgIconDirective);

 
function maSvgIconDirective($http, $templateCache) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            src: '@'
        },
        link: function (scope, element, attr) {
            // Use either pre-configured SVG or URL source, respectively.
            
            attr.$observe('src', function (attrVal) {
                element.empty();
                if (attrVal) {
                    loadIcon(attrVal).then(function (svg) {
                        element.html(svg);
                        applyStyles(element.children()[0]);
                    });
                }
            });
        }
    };
 
    function loadIcon(url) {
        return $http.get(url, { cache: $templateCache }).then(function (result) {
            return result.data;
        });
    }

 
    function applyStyles(element) {
        var viewBoxSize = 24;

        angular.forEach({
            'fit': '',
            'height': '100%',
            'width': '100%',
            'preserveAspectRatio': 'xMidYMid meet',
            'viewBox': element.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize)
        }, function (val, attr) {
            element.setAttribute(attr, val);
        }, this);

        angular.forEach({
            'pointer-events': 'none',
            'display': 'block'
        }, function (val, style) {
            element.style[style] = val;
        }, this);
    }
}

Click here to live Preview  and download 


Leave a Reply