Иконка React Fill

akar-icons:react-fill

Иконка React Fill (akar-icons:react-fill) — бесплатная SVG-иконка из набора Akar Icons от Arturo Wibawa. Она нарисована на сетке 24 × 24. Akar Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.

Набор: Akar Icons
Автор: Arturo Wibawa
Лицензия: MIT
Размер: 24 × 24
Теги: reactfill

Скачать SVG

Код SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><g fill="currentColor" clip-path="url(#SVGXv8lpc2Y)"><path d="M24 11.689c0-1.59-1.991-3.097-5.044-4.031c.705-3.111.392-5.587-.988-6.38a2.15 2.15 0 0 0-1.096-.273v1.09c.225 0 .406.045.558.128c.665.382.954 1.834.729 3.703c-.054.46-.142.944-.25 1.438a24 24 0 0 0-3.106-.533a24 24 0 0 0-2.035-2.446c1.595-1.482 3.092-2.294 4.11-2.294V1c-1.346 0-3.107.959-4.888 2.622C10.21 1.97 8.448 1.02 7.103 1.02v1.09c1.013 0 2.515.808 4.11 2.28c-.685.72-1.37 1.536-2.021 2.441a23 23 0 0 0-3.111.538q-.168-.734-.255-1.418c-.23-1.87.054-3.322.715-3.708c.146-.088.337-.128.562-.128v-1.09c-.41 0-.783.088-1.105.273c-1.375.793-1.683 3.263-.974 6.365C1.981 8.603 0 10.104 0 11.689c0 1.59 1.991 3.097 5.044 4.03c-.705 3.112-.392 5.588.988 6.38c.318.186.69.274 1.1.274c1.346 0 3.107-.959 4.888-2.622c1.78 1.653 3.541 2.602 4.887 2.602a2.2 2.2 0 0 0 1.105-.274c1.375-.792 1.683-3.262.974-6.364C22.019 14.781 24 13.274 24 11.689m-6.37-3.263a22 22 0 0 1-.66 1.932a26 26 0 0 0-1.345-2.319q1.044.153 2.006.387m-2.24 5.21a26 26 0 0 1-1.179 1.869a25.5 25.5 0 0 1-4.412.005a25.5 25.5 0 0 1-2.201-3.806a26 26 0 0 1 2.192-3.82a25.5 25.5 0 0 1 4.411-.006q.61.875 1.184 1.86q.557.961 1.018 1.946a27 27 0 0 1-1.013 1.952M16.97 13c.264.656.49 1.311.675 1.947c-.64.157-1.316.289-2.015.391A27 27 0 0 0 16.97 13m-4.96 5.22q-.684-.706-1.36-1.566c.44.02.89.035 1.345.035q.691.001 1.36-.035c-.44.573-.895 1.096-1.345 1.566m-3.64-2.882a22 22 0 0 1-2.006-.386c.181-.631.406-1.282.66-1.932c.201.39.412.782.642 1.174q.345.587.704 1.144m3.615-10.18q.684.706 1.36 1.566c-.44-.02-.89-.035-1.345-.035q-.691-.001-1.36.035c.44-.573.895-1.096 1.345-1.566M8.365 8.04a27 27 0 0 0-1.34 2.333a21 21 0 0 1-.675-1.947c.64-.152 1.316-.284 2.015-.386m-4.427 6.124c-1.732-.738-2.852-1.707-2.852-2.475s1.12-1.742 2.852-2.475c.42-.181.88-.343 1.355-.494c.279.958.646 1.956 1.1 2.979a23 23 0 0 0-1.085 2.964a15 15 0 0 1-1.37-.499m2.632 6.99c-.665-.38-.954-1.834-.729-3.702c.054-.46.142-.945.25-1.439c.958.235 2.005.416 3.106.534a24 24 0 0 0 2.035 2.446c-1.595 1.482-3.092 2.294-4.11 2.294a1.2 1.2 0 0 1-.552-.132m11.604-3.727c.23 1.869-.054 3.322-.715 3.708c-.146.088-.337.127-.562.127c-1.013 0-2.515-.807-4.11-2.28a23 23 0 0 0 2.021-2.44a23 23 0 0 0 3.111-.538q.171.74.255 1.423m1.883-3.263c-.42.181-.88.343-1.355.494a23.5 23.5 0 0 0-1.1-2.979c.45-1.017.811-2.01 1.085-2.964q.728.227 1.375.499c1.732.738 2.852 1.707 2.852 2.475c-.005.768-1.125 1.742-2.857 2.475"/><path d="M11.995 13.925a2.236 2.236 0 1 0 0-4.472a2.236 2.236 0 0 0 0 4.472"/></g><defs><clipPath id="SVGXv8lpc2Y"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

Как использовать иконку React Fill

React

import { Icon } from "@iconify/react";

<Icon icon="akar-icons:react-fill" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="akar-icons:react-fill" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="akar-icons:react-fill" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[akar-icons--react-fill]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/akar-icons -->
<div class="i-akar-icons:react-fill"></div>

Веб-компонент

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="akar-icons:react-fill"></iconify-icon>

Изображение HTML

<img src="https://iconyz.com/api/public/svg/akar-icons/react-fill.svg" alt="Иконка React Fill" width="24" height="24">

Иконка React Fill в других наборах

Вопросы и ответы: Иконка React Fill

Можно ли бесплатно использовать иконку React Fill в коммерческих проектах?

Да. Akar Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.

Как использовать иконку React Fill в React?

Установите @iconify/react и выведите <Icon icon="akar-icons:react-fill" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.

Как добавить иконку React Fill на веб-страницу?

Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/akar-icons/react-fill.svg" alt="Иконка React Fill">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.

Все Akar Icons →