How can I read a svg-file in the panel and use it inline?

The CMS Questions
1

Hi,

i would like to read svg-files in a custom button-block, to change the colors based on the current block color like <svg fill="currentColor" ....

In the front-end this is possible with

<?= asset('assets/icons/heart.svg')->read() ?>

as Bastian mentions in his »working with SVG«-video.

How can read svg-files in the panel?

Cheers
Peter

2

Solved it with a custom route.
Not shure about the performance yet, but it works.

// src/components/Button.vue
<template>
   <svg v-html="svg" />
</template>

<script>

export default {
...
created() {
  let file =  this.content.icon_file;
  if(file != '') {
    this.$api.get('get-svg-icon', {filename: file[0].filename}).then(response => {
        this.svg = response.svg
    });
  }
},
...
}

</script>

// index.php
<?php 
Kirby::plugin('button/block', [
  'api' => [
    'routes' => function ($kirby) {
        return [
          [
            'pattern' => 'get-svg-icon',
            'action'  => function () use ($kirby) {
              $filename = get('filename');
              return [
                'svg' => $kirby->site()
                          ->findPageOrDraft('settings')
                          ->findPageOrDraft('icons')
                          ->files()
                          ->find($filename)
                          ->read()
              ];
            }
          ],
          ...