custom icons v1

This commit is contained in:
Daniel Herrero 2018-02-21 11:41:22 +01:00
parent ade0e3beb0
commit 626a0ec7ca
7 changed files with 73 additions and 9 deletions

View File

@ -1,8 +1,33 @@
import ngModule from '../../module'; import ngModule from '../../module';
import './style.css'; import './style.css';
class Icon {
constructor($attrs) {
this.$attrs = $attrs;
this._icon = null;
}
set icon(value) {
this._icon = value;
this.drawIcon();
}
get icon() {
return this._icon;
}
drawIcon() {
if (this.icon.startsWith('icon-')) {
this.iconClass = this.icon;
this.iconContent = '';
} else {
this.iconClass = 'material-icons';
this.iconContent = this.icon;
}
}
}
Icon.$inject = ['$attrs'];
ngModule.component('vnIcon', { ngModule.component('vnIcon', {
template: '<i class="material-icons">{{::$ctrl.icon}}</i>', template: '<i class="{{::$ctrl.iconClass}}">{{::$ctrl.iconContent}}</i>',
controller: Icon,
bindings: { bindings: {
icon: '@' icon: '@'
} }

View File

@ -2,7 +2,7 @@ vn-icon {
display: inline-block; display: inline-block;
font-size: 18pt; font-size: 18pt;
} }
vn-icon > i.material-icons { vn-icon > i {
display: block; display: block;
font-size: inherit; font-size: inherit;
} }

View File

@ -1,9 +1,7 @@
import './styles/mdl-override.css'; import './styles';
import './styles/mdi-override.css';
import './styles/zoom-image.css';
export * from './module'; export * from './module';
export * from './directives/index'; export * from './directives';
export * from './filters/index'; export * from './filters';
export * from './lib/index'; export * from './lib';
export * from './components/index'; export * from './components';

View File

@ -0,0 +1,30 @@
@font-face {
font-family: 'fontello';
src: url('./fontello.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: 400;
speak: none;
display: inline-block;
text-decoration: inherit;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@ -0,0 +1,6 @@
.icon-tags:before { content: '\e800'; }
.icon-tree:before { content: '\e801'; }
.icon-clone2:before { content: '\e802'; }
.icon-preview:before { content: '\e803'; }
.icon-history:before { content: '\f1da'; }

Binary file not shown.

View File

@ -0,0 +1,5 @@
import './mdl-override.css';
import './mdi-override.css';
import './zoom-image.css';
import './fontello-head.css';
import './fontello-icons.css';