vira
Version:
A simple and highly versatile design system using element-vir.
52 lines (51 loc) • 1.79 kB
JavaScript
import { html } from 'element-vir';
import { viraIconCssVars } from '../../icon-css-vars.js';
import { defineIcon } from '../../icon-svg.js';
/**
* A icon indicating ascending sorting.
*
* @category Icon
* @category SVG
* @see https://electrovir.github.io/vira/book/icons/sortascending24icon
*/
export const SortAscending24Icon = defineIcon({
name: 'SortAscending24Icon',
svgTemplate: html `
<svg
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
fill-rule="evenodd"
clip-rule="evenodd"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
fill=${viraIconCssVars['vira-icon-fill-color'].value}
fill-rule="nonzero"
d="M17.5 4C18.9 4 20 5.1 20 6.5V20H7V4z"
/>
<path
fill="none"
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
d="m3 8 4-4 4 4M7 4v16"
/>
<path
fill="none"
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
stroke-linecap="square"
stroke-linejoin="round"
d="M20 8h-5m0 2V6.5C15 5.1 16.1 4 17.5 4S20 5.1 20 6.5V10"
/>
<path
fill="none"
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
stroke-linecap="square"
d="M15 14h5l-5 6h5"
/>
</svg>
`,
});