Skip to content

Plugin toolbar icon is blurry when used in CKEditor #17

@AnnaTomanek

Description

@AnnaTomanek

The icon was designed for 16x16px due to GitHub UI: https://github.com/ckeditor/ckeditor5-mermaid/blob/master/theme/icons/insert.svg?short_path=b87e06b#L1

But since CKEditor 5 uses 20px icons, it looks blurry in our own Mermaid integration example in the docs on non-Retina screens:
Screenshot 2023-06-14 at 08 40 29

Looks OK for Retina:
Screenshot 2023-06-14 at 08 42 55

As per @oleq's comment:

If you use 1px strokes in 16px, you get 1.25px in 20px. If you use 2px strokes in 16px you get 2.5px in 20px. There’s no way to get sharp integers in both sizes. So there will always be blur in some case unless we provide two dedicated icon sets.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions