custom icons v1
This commit is contained in:
parent
ade0e3beb0
commit
626a0ec7ca
|
@ -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: '@'
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -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.
|
@ -0,0 +1,5 @@
|
||||||
|
import './mdl-override.css';
|
||||||
|
import './mdi-override.css';
|
||||||
|
import './zoom-image.css';
|
||||||
|
import './fontello-head.css';
|
||||||
|
import './fontello-icons.css';
|
Loading…
Reference in New Issue