Icons & SVG Graphics

Cotton's component-ized approach provides another compelling use-case. Sure, there are svg icon packages for Django already, but what if you need to use a custom icon in your project?

plane.svg

<svg viewBox="0 0 512 512">
  <g fill="none" stroke="#000" stroke-width="30" stroke-linejoin="round">
    <path d="M143.533 256 79.267 384.533v-192.8L497 127.467z"/>
    <path d="M143.533 256 79.267 384.533l119.352-73.448zM15 127.467h482L79.267 191.733z"/>
    <path d="M143.533 256 497 127.467l-241 241z"/>
  </g>
</svg>

preview

Let's "cotton-ize"

cotton/icons/plane.html

<c-vars stroke_width="30" />

<svg {{ attrs }} viewBox="0 0 512 512">
  <g fill="none" stroke="currentColor" stroke-width="{{ stroke_width }}" stroke-linejoin="round">
    <path d="M143.533 256 79.267 384.533v-192.8L497 127.467z"/>
    <path d="M143.533 256 79.267 384.533l119.352-73.448zM15 127.467h482L79.267 191.733z"/>
    <path d="M143.533 256 497 127.467l-241 241z"/>
  </g>
</svg>

view.html

<c-icons.plane class="size-20 text-red-500" />
<c-icons.plane class="size-20 text-teal-500" />
<c-icons.plane class="size-20 text-gray-500 animate-bounce" />
<c-icons.plane class="size-24 text-purple-500" stroke_width="10" />

preview

back Layouts