Files
etcher/lib/browser/components/svg-icon/directives/svg-icon.js
Juan Cruz Viotti 0dcc7b22b8 Implement SVGIcon Angular directive (#324)
* Inherit current scope in osOpenExternal directive

This directive attempts to create a new isolated scope, which leads the
errors when using this directive on top of another directive in the same
element.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

* Implement SVGIcon Angular directive

This directive replaces part of `hero-icon`, the old Polymer component.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
2016-04-13 16:14:46 -04:00

64 lines
1.7 KiB
JavaScript

/*
* Copyright 2016 Resin.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
const path = require('path');
const fs = require('fs');
/**
* @summary SVGIcon directive
* @function
* @public
*
* @description
* This directive provides an easy way to load SVG icons
* by embedding the SVG contents inside the element, making
* it possible to style icons with CSS.
*
* @example
* <svg-icon path="path/to/icon.svg" width="40px" height="40px"></svg-icon>
*/
module.exports = function() {
return {
templateUrl: './browser/components/svg-icon/templates/svg-icon.tpl.html',
replace: true,
restrict: 'E',
scope: {
path: '@',
width: '@',
height: '@'
},
link: function(scope, element) {
// This means the path to the icon should be
// relative to *this directory*.
// TODO: There might be a way to compute the path
// relatively to the `index.html`.
const imagePath = path.join(__dirname, scope.path);
const contents = fs.readFileSync(imagePath, {
encoding: 'utf8'
});
element.html(contents);
element.css('width', scope.width || '40px');
element.css('height', scope.height || '40px');
}
};
};