MkIcon

Show source on GitHub

Pyconify-based Icon.

ExamplesDocStringsBase classes⋔ Inheritance diagramNodeFileCode

Example: With caption

Jinja

{{ "mdi:file" | MkIcon }}

Python

MkIcon('mdi:file')

RenderedMarkdownHtml

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></svg>

<p><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></svg></p>

Example: Colored

Jinja

{{ "mdi:file" | MkIcon(color="red") }}

Python

MkIcon('mdi:file', color='red')

RenderedMarkdownHtml

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="red" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></svg>

<p><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="red" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></svg></p>

Example: Rotated

Jinja

{{ "mdi:file" | MkIcon(rotate=90) }}

Python

MkIcon('mdi:file', rotate=90)

RenderedMarkdownHtml

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></g></svg>

<p><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6Z"/></g></svg></p>

Example: Sized

Jinja

{{ "noto:wrench" | MkIcon(height=100, width=100) }}

Python

MkIcon('noto:wrench', height=100, width=100)

RenderedMarkdownHtml

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 128 128"><path fill="#82AEC0" d="M113.88 94.05c-1.36-1.16-3.17-2.53-5.46-4.26c-8.49-6.44-24.2-18.37-50.96-45.03c2.06-3.75 3.23-7.95 3.36-12.37c.24-7.56-2.69-14.97-8.04-20.32c-8.84-8.84-22.55-10.61-33.34-4.3c-.49.29-.79.82-.79 1.39s.31 1.1.8 1.38l16.61 9.59c1.64 8.29-3.12 16.57-11.18 19.35L8.22 29.84c-.49-.28-1.1-.29-1.59 0c-.49.28-.8.8-.81 1.37c-.09 8.13 3.4 15.85 9.58 21.18c5.12 4.42 11.52 6.62 17.92 6.62c3.59 0 7.17-.72 10.54-2.11c24.21 24.32 35.66 41.18 42.52 51.29c2.4 3.54 4.14 6.1 5.63 7.77c4.56 5.1 9.52 7.86 14.36 7.99c.12 0 5.33.8 10.83-4.7c3.46-3.46 5.14-7.25 4.98-11.24c-.2-4.74-2.99-9.44-8.3-13.96zm-9.07 18.92c-3.39 0-6.15-2.75-6.15-6.15s2.75-6.15 6.15-6.15s6.15 2.75 6.15 6.15s-2.76 6.15-6.15 6.15z"/><path fill="#2F7889" d="M61.13 48.38c-1.2-1.18-2.42-2.39-3.67-3.63c2.06-3.75 3.23-7.95 3.36-12.37c.09-3-.32-5.96-1.17-8.79c-.76-1.25-1.96-2.59-2.72-1.78c.31 9.82-2.54 20.05-9.37 27.11c-3.39 3.5-7.8 6.03-12.53 7.23c-2.34.59-4.76.85-7.17.72c-1.41-.08-5.39-1.55-6.19-.47v.05c3.67 1.71 7.65 2.56 11.63 2.56c3.59 0 7.17-.72 10.54-2.11c7.83 7.87 14.32 14.95 19.76 21.28c-2.72-5.14-10.74-14.63-12.88-18.25c-.48-.82-1.16-2.92.37-4.81c2.17-2.65 6.58-5.11 10.04-6.74z"/><path fill="#B9E4EA" d="M70.01 66.91s3.73-1.64 9.25 2.83c5.52 4.48 26.76 22.54 28.55 24.93c1.79 2.39-5.42-.04-7.96-.48c-2.53-.45-29.84-27.28-29.84-27.28zM43.32 12c3.08 2.21 5.84 4.82 8.73 7.28c.74.63 1.83 1.27 2.6.66c.83-.66.31-1.98-.32-2.84c-5.46-7.5-15.65-12.86-25.5-10.73C34.03 8.04 38.7 8.7 43.32 12z"/><path fill="#2F7889" d="M18.83 37.74c1.21.72 2.89 1.7 3.86 1.97c1.17.32 4.46-.95 5.42-1.72c-3.94-2.57-8.34-5.45-12.29-8.02c-.45-.29-.9-.59-1.41-.75c-.62-.19-1.28-.18-1.92-.14c-.9.04-5.3-.11-5.81.67c-.52.79 1.31 1.54 1.9 1.9c3.41 2.04 6.84 4.05 10.25 6.09z"/></svg>

<p><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 128 128"><path fill="#82AEC0" d="M113.88 94.05c-1.36-1.16-3.17-2.53-5.46-4.26c-8.49-6.44-24.2-18.37-50.96-45.03c2.06-3.75 3.23-7.95 3.36-12.37c.24-7.56-2.69-14.97-8.04-20.32c-8.84-8.84-22.55-10.61-33.34-4.3c-.49.29-.79.82-.79 1.39s.31 1.1.8 1.38l16.61 9.59c1.64 8.29-3.12 16.57-11.18 19.35L8.22 29.84c-.49-.28-1.1-.29-1.59 0c-.49.28-.8.8-.81 1.37c-.09 8.13 3.4 15.85 9.58 21.18c5.12 4.42 11.52 6.62 17.92 6.62c3.59 0 7.17-.72 10.54-2.11c24.21 24.32 35.66 41.18 42.52 51.29c2.4 3.54 4.14 6.1 5.63 7.77c4.56 5.1 9.52 7.86 14.36 7.99c.12 0 5.33.8 10.83-4.7c3.46-3.46 5.14-7.25 4.98-11.24c-.2-4.74-2.99-9.44-8.3-13.96zm-9.07 18.92c-3.39 0-6.15-2.75-6.15-6.15s2.75-6.15 6.15-6.15s6.15 2.75 6.15 6.15s-2.76 6.15-6.15 6.15z"/><path fill="#2F7889" d="M61.13 48.38c-1.2-1.18-2.42-2.39-3.67-3.63c2.06-3.75 3.23-7.95 3.36-12.37c.09-3-.32-5.96-1.17-8.79c-.76-1.25-1.96-2.59-2.72-1.78c.31 9.82-2.54 20.05-9.37 27.11c-3.39 3.5-7.8 6.03-12.53 7.23c-2.34.59-4.76.85-7.17.72c-1.41-.08-5.39-1.55-6.19-.47v.05c3.67 1.71 7.65 2.56 11.63 2.56c3.59 0 7.17-.72 10.54-2.11c7.83 7.87 14.32 14.95 19.76 21.28c-2.72-5.14-10.74-14.63-12.88-18.25c-.48-.82-1.16-2.92.37-4.81c2.17-2.65 6.58-5.11 10.04-6.74z"/><path fill="#B9E4EA" d="M70.01 66.91s3.73-1.64 9.25 2.83c5.52 4.48 26.76 22.54 28.55 24.93c1.79 2.39-5.42-.04-7.96-.48c-2.53-.45-29.84-27.28-29.84-27.28zM43.32 12c3.08 2.21 5.84 4.82 8.73 7.28c.74.63 1.83 1.27 2.6.66c.83-.66.31-1.98-.32-2.84c-5.46-7.5-15.65-12.86-25.5-10.73C34.03 8.04 38.7 8.7 43.32 12z"/><path fill="#2F7889" d="M18.83 37.74c1.21.72 2.89 1.7 3.86 1.97c1.17.32 4.46-.95 5.42-1.72c-3.94-2.57-8.34-5.45-12.29-8.02c-.45-.29-.9-.59-1.41-.75c-.62-.19-1.28-.18-1.92-.14c-.9.04-5.3-.11-5.81.67c-.52.79 1.31 1.54 1.9 1.9c3.41 2.04 6.84 4.05 10.25 6.09z"/></svg></p>

Bases: MkNode

__init__

__init__(
    icon_name: str,
    *,
    color: str | None = None,
    height: str | int | None = None,
    width: str | int | None = None,
    flip: icons.Flip | None = None,
    rotate: icons.Rotation | None = None,
    box: bool | None = None,
    **kwargs: Any
)

Parameters:

Name	Type	Description	Default
icon_name	str	Icon name	required
color	str | None	Icon color. Replaces currentColor with specific color, resulting in icon with hardcoded palette.	None
height	str | int | None	Icon height. If only one dimension is specified, such as height, other dimension will be automatically set to match it.	None
width	str | int | None	Icon width. If only one dimension is specified, such as height, other dimension will be automatically set to match it.	None
flip	Flip | None	Flip icon.	None
rotate	Rotation | None	Rotate icon. If an int is provided, it is assumed to be in degrees.	None
box	bool | None	Adds an empty rectangle to SVG that matches the icon's viewBox. It is needed when importing SVG to various UI design tools that ignore viewBox. Those tools, such as Sketch, create layer groups that automatically resize to fit content. Icons usually have empty pixels around icon, so such software crops those empty pixels and icon's group ends up being smaller than actual icon, making it harder to align it in design.	None
kwargs	Any	Keyword arguments passed to parent	{}

Name	Children	Inherits
MkNode mknodes.basenodes.mknode Base class for everything which can be expressed as Markup.	MkContainer MkCompactAdmonition MkLink MkText MkHeader MkKeys MkDocStrings MkIcon MkImage MkProgressBar BaseBlock ...	Node

graph TD
  94854582965440["mkicon.MkIcon"]
  94854582916880["mknode.MkNode"]
  94854582838576["node.Node"]
  140544995341632["builtins.object"]
  94854582916880 --> 94854582965440
  94854582838576 --> 94854582916880
  140544995341632 --> 94854582838576

/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkicon/metadata.toml

[metadata]
icon = "mdi:image"
status = "new"
name = "MkIcon"
group = "image"

[examples.with_caption]
title = "With caption"
jinja = """
{{ "mdi:file" | MkIcon }}
"""

[examples.colored]
title = "Colored"
jinja = """
{{ "mdi:file" | MkIcon(color="red") }}
"""

[examples.rotated]
title = "Rotated"
jinja = """
{{ "mdi:file" | MkIcon(rotate=90) }}
"""

[examples.sized]
title = "Sized"
jinja = """
{{ "noto:wrench" | MkIcon(height=100, width=100) }}
"""

[output.html]
template = """
{{ node.icon_name | get_icon_svg(color=node.color, height=node.height, width=node.width, flip=node.flip, rotate=node.rotate, box=node.box)}}
"""

class MkIcon(mknode.MkNode):
    """Pyconify-based Icon."""

    ICON = "material/image"
    ATTR_LIST_SEPARATOR = "\n"
    STATUS = "new"

    def __init__(
        self,
        icon_name: str,
        *,
        color: str | None = None,
        height: str | int | None = None,
        width: str | int | None = None,
        flip: icons.Flip | None = None,
        rotate: icons.Rotation | None = None,
        box: bool | None = None,
        **kwargs: Any,
    ):
        """Constructor.

        Arguments:
            icon_name: Icon name
            color: Icon color. Replaces currentColor with specific color, resulting in
                   icon with hardcoded palette.
            height: Icon height. If only one dimension is specified, such as height, other
                    dimension will be automatically set to match it.
            width: Icon width. If only one dimension is specified, such as height, other
                   dimension will be automatically set to match it.
            flip: Flip icon.
            rotate: Rotate icon. If an int is provided, it is assumed to be in degrees.
            box: Adds an empty rectangle to SVG that matches the icon's viewBox.
                 It is needed when importing SVG to various UI design tools that ignore
                 viewBox. Those tools, such as Sketch, create layer groups that
                 automatically resize to fit content. Icons usually have empty pixels
                 around icon, so such software crops those empty pixels and icon's
                 group ends up being smaller than actual icon, making it harder to
                 align it in design.
            kwargs: Keyword arguments passed to parent
        """
        super().__init__(**kwargs)
        self.icon_name = icon_name
        self.color = color
        self.height = height
        self.width = width
        self.flip = flip
        self.rotate = rotate
        self.box = box

    @property
    def svg(self) -> str:
        import requests.exceptions

        try:
            return icons.get_icon_svg(
                self.icon_name,
                color=self.color,
                height=self.height,
                width=self.width,
                flip=self.flip,
                rotate=self.rotate,
                box=self.box,
            )
        except requests.exceptions.HTTPError:
            logger.warning("Could not find icon %r", self.icon_name)
            return ""

    def _to_markdown(self) -> str:
        return self.svg