Canva アイコン
thesvg-color:canva
Canva アイコン(thesvg-color:canva)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 80 × 80 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 80 × 80
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><g fill="none"><g clip-path="url(#SVGFqrTtczy)"><path fill="#7d2ae7" d="M40 80c22.091 0 40-17.909 40-40S62.091 0 40 0S0 17.909 0 40s17.909 40 40 40"/><path fill="url(#SVGd8hhpebI)" d="M40 80c22.091 0 40-17.909 40-40S62.091 0 40 0S0 17.909 0 40s17.909 40 40 40"/><path fill="url(#SVGXjE8Ac6X)" d="M40 80c22.091 0 40-17.909 40-40S62.091 0 40 0S0 17.909 0 40s17.909 40 40 40"/><path fill="url(#SVG1MVRi0Vl)" d="M40 80c22.091 0 40-17.909 40-40S62.091 0 40 0S0 17.909 0 40s17.909 40 40 40"/><path fill="url(#SVGlcMqmcyN)" d="M40 80c22.091 0 40-17.909 40-40S62.091 0 40 0S0 17.909 0 40s17.909 40 40 40"/><path fill="#fff" d="M57.27 48.205c-.331 0-.622.279-.924.888c-3.414 6.922-9.31 11.82-16.133 11.82c-7.89 0-12.776-7.122-12.776-16.96c0-16.668 9.286-26.304 17.443-26.304c3.811 0 6.139 2.395 6.139 6.207c0 4.524-2.57 6.919-2.57 8.514c0 .716.445 1.15 1.328 1.15c3.55 0 7.715-4.078 7.715-9.84c0-5.585-4.862-9.691-13.018-9.691c-13.48 0-25.46 12.497-25.46 29.788c0 13.384 7.643 22.23 19.436 22.23c12.517 0 19.754-12.454 19.754-16.497c0-.895-.457-1.305-.935-1.305"/></g><defs><radialGradient id="SVGd8hhpebI" cx="0" cy="0" r="1" gradientTransform="rotate(-49.416 84.778 18.66)scale(61.8733)" gradientUnits="userSpaceOnUse"><stop stop-color="#6420ff"/><stop offset="1" stop-color="#6420ff" stop-opacity="0"/></radialGradient><radialGradient id="SVGXjE8Ac6X" cx="0" cy="0" r="1" gradientTransform="rotate(54.703 1.799 25.019)scale(69.7735)" gradientUnits="userSpaceOnUse"><stop stop-color="#00c4cc"/><stop offset="1" stop-color="#00c4cc" stop-opacity="0"/></radialGradient><radialGradient id="SVG1MVRi0Vl" cx="0" cy="0" r="1" gradientTransform="rotate(-45.195 92.905 16.89)scale(61.1242 28.1118)" gradientUnits="userSpaceOnUse"><stop stop-color="#6420ff"/><stop offset="1" stop-color="#6420ff" stop-opacity="0"/></radialGradient><radialGradient id="SVGlcMqmcyN" cx="0" cy="0" r="1" gradientTransform="rotate(66.52 8.14 30.33)scale(62.9836 105.512)" gradientUnits="userSpaceOnUse"><stop stop-color="#00c4cc" stop-opacity=".726"/><stop offset="0" stop-color="#00c4cc"/><stop offset="1" stop-color="#00c4cc" stop-opacity="0"/></radialGradient><clipPath id="SVGFqrTtczy"><path fill="#fff" d="M0 0h80v80H0z"/></clipPath></defs></g></svg>Canva アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:canva" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:canva" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:canva" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--canva]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:canva"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:canva"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/canva.svg" alt="Canva アイコン" width="24" height="24">theSVG Color の関連アイコン
他のアイコンセットの Canva アイコン
Canva アイコン のよくある質問
Canva アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Canva アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:canva" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Canva アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/canva.svg" alt="Canva アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。