lucide/docs/.vitepress/theme/components/icons/CopySVGButton.vue

<script setup lang="ts">
import { ref } from 'vue';
import ButtonMenu from '../base/ButtonMenu.vue';
import { useIconStyleContext } from '../../composables/useIconStyle';
import useConfetti from '../../composables/useConfetti';
import getSVGIcon from '../../utils/getSVGIcon';
import downloadData from '../../utils/downloadData';

const downloadText = 'Download!';
const copiedText = 'Copied!';
const confettiText = ref(copiedText);
const props = defineProps<{
  name: string;
  popoverPosition?: 'top' | 'bottom';
}>();

const { size } = useIconStyleContext();

const { animate, confetti } = useConfetti();

function copySVG() {
  confettiText.value = copiedText;
  const svgString = getSVGIcon();

  navigator.clipboard.writeText(svgString);

  confetti();
}

function copyDataUrl() {
  confettiText.value = copiedText;
  const svgString = getSVGIcon();

  // Create SVG data url
  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
  navigator.clipboard.writeText(dataUrl);

  confetti();
}

function downloadSVG() {
  confettiText.value = downloadText;
  const svgString = getSVGIcon();

  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
  confetti();
}

function downloadPNG() {
  confettiText.value = downloadText;
  const svgString = getSVGIcon();

  const canvas = document.createElement('canvas');
  canvas.width = size.value;
  canvas.height = size.value;
  const ctx = canvas.getContext('2d');

  const image = new Image();
  image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
  image.onload = function () {
    ctx.drawImage(image, 0, 0);
    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'));
    confetti();
  };
}
</script>

<template>
  <ButtonMenu
    :buttonClass="`confetti-button ${animate ? 'animate' : ''}`"
    callOptionOnClick
    id="copy-svg-button"
    :data-confetti-text="confettiText"
    :popoverPosition="popoverPosition"
    :options="[
      { text: 'Copy SVG', onClick: copySVG },
      { text: 'Copy Data URL', onClick: copyDataUrl },
      { text: 'Download SVG', onClick: downloadSVG },
      { text: 'Download PNG', onClick: downloadPNG },
    ]"
  />
</template>

<style src="./confetti.css" />