vira

Version:

A simple and highly versatile design system using element-vir.

electrovir.github.io/element-vir/vira

30 lines (29 loc) • 1.2 kB

JavaScript

import { html } from 'element-vir';
import { viraIconCssVars } from '../icon-css-vars.js';
import { defineIcon } from '../icon-svg.js';
/**
 * A pencil icon.
 *
 * @category Icon
 * @category SVG
 * @see https://electrovir.github.io/element-vir/vira/book/icons/pencil24icon
 */
export const Pencil24Icon = defineIcon({
    name: 'Pencil24Icon',
    svgTemplate: html `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path
                d="M20.041 4.966c.303-.418.097-1.085-.459-1.489l-1.771-1.285c-.557-.404-1.255-.393-1.558.025L5.12 17.561l-.167 4.215 3.955-1.467S19.965 5.071 20.041 4.966"
                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
                fill=${viraIconCssVars['vira-icon-fill-color'].value}
            />
            <path
                d="m5.384 17.197 3.788 2.749m5.97-16.198 3.788 2.749"
                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
                fill="none"
            />
        </svg>
    `,
});