search

kolkov / angular-editor

A simple native WYSIWYG editor component for Angular 6 -14+
https://angular-editor.kolkov.ru
MIT License
672 stars 357 forks source link

Technical feature: make the dependency on bootstrap and fontawesome optional so other UI framework like Angular Material could be looking perfect #94

Open zijianhuang opened 5 years ago

zijianhuang commented 5 years ago

currently the dependency on font-awesome is for the styling and the font icons of the toolbar. However, I am using Angular Material and Material icons, and prefer consistent styling different from bootstrap and font-awesome.

It might be possible that angular-editor could satisfy both styles through customizable toolbar which had be documented in the issues.

Font-awesome will be late, lazily, optionally loaded, so application developers may craft their own toolbar in Material Design style and with Material icons.

kolkov commented 5 years ago

Hi! In general, I thought of making a toolbar using svg icons, but I need to think... is there any good example on the internet?

zijianhuang commented 5 years ago

SVG icons are good for drafting and as original source of PNG files. However, many platforms like Android and iOS still primarily support a set of PNG files for various sizes and DPIs. There are plenty tools to do the transformation from svg to png file set. Android 5 has support svg file for icons,

For Web frontend, so far I know that Angular Material support svg for icons, here are some code examples I had used: In app.component.ts

    constructor(...
        private iconRegistry: MatIconRegistry,
        private sanitizer: DomSanitizer,,
    ) {...}

    ngOnInit(): void {
...
        this.iconRegistry.addSvgIcon('c_tasks', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/format-list-checks.svg'));
this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/format-list-checks.svg'));
        this.iconRegistry.addSvgIcon('c_noteComplete', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/playlist-check.svg'));
        this.iconRegistry.addSvgIcon('c_checkboxes', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/format-list-checkbox.svg'));
        this.iconRegistry.addSvgIcon('c_addNote', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/playlist-plus.svg'));
        this.iconRegistry.addSvgIcon('c_medical', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/medical-bag.svg'));
        this.iconRegistry.addSvgIcon('c_accounts', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/account-box-multiple.svg'));
        this.iconRegistry.addSvgIcon('c_handdraw', this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/gesture-tap.svg'));
...
    }

Then in MyBusiness.component.html

        <button *ngIf="tasksEnabled" type="button" mat-icon-button mat-button mat-raised-button (click)="showNewTask()" matTooltip="Add task for selected appointment">
            <mat-icon svgIcon="c_tasks"></mat-icon>
        </button>

I had used font-awesome around 6 years ago, and I don't follow if it support svg. Nevertheless, if you could make toolbar customizable/plug-able, you may leave the icon usage independent of the core.

I guess you are going provide a default implementation using fontawesome like the existing one, while allowing replacement with a Angular Material implementation.

kolkov commented 5 years ago

I originally intended to use svg font, but I will explore all possible options. Thanks!

embu18 commented 3 years ago

@kolkov as I understand, custom svg icons are not going to happen?