hpg/content/.vitepress/theme/DownloadLink.vue

<script setup>
  import icon from './pdf.png';

  const { file, text } = defineProps([ 'file', 'text' ]);
</script>

<template>
  <a class="downloadlink" :href="'/bijlagen/' + file" target="_blank">
    <span>{{ text }}</span>
    <em>(.pdf)</em>
  </a>
</template>

<style scoped>
  .downloadlink {
    display: inline-block;
    text-decoration: none;
    margin: 0 1.75rem 0.5rem 0;
  }

  .downloadlink::before {
    display: inline-block;
    content: '';
    background-image: url('./pdf.png');
    background-size: 1.5em 1.875em;
    width: 1.5em;
    height: 1.875em;
    vertical-align: -0.5em;
    margin-right: .5em;
  }
  .downloadlink::after {
    display: none !important;
  }

  .downloadlink span {
    text-decoration: underline;
  }
  .downloadlink:hover span {
    text-decoration: none;
  }

  .downloadlink em {
    font-style: normal;
    margin-left: 0.5rem;
    color: var(--vp-c-text-2);
  }
</style>