Remove SVG imports from `?raw` and remove usage of v-safe-html to render images

Description

Our webpack configuration supports importing SVGs in two ways, by using <img> or v-safe-html. Having an <img> is more semantic and requires fewer imports.

Use should migrate occurrences to use <img> instead.

From

<script>
import GITLAB_LOGO_RAW from '@gitlab/svgs/dist/illustrations/gitlab_logo.svg?raw';
import SafeHtml from '~/vue_shared/directives/safe_html';

export default {
  directives: {
    SafeHtml
  },
  GITLAB_LOGO_RAW,
};
</script>
<template>
  <div>
    <div v-safe-html="$options.GITLAB_LOGO_RAW"/>
  </div>
</template>

To

<script>
import GITLAB_LOGO_URL from '@gitlab/svgs/dist/illustrations/gitlab_logo.svg?url';

export default {
  GITLAB_LOGO_URL,
};
</script>
<template>
  <div>
    <img :src="$options.GITLAB_LOGO_URL" alt="GitLab Logo"/>
  </div>
</template>

Files that import svgs using `?raw`

Exceptions:

[-] ~~app/assets/javascripts/super_sidebar/components/brand_logo.vue~~ !125892 (closed)
- This logo is styled and animated by CSS app/assets/stylesheets/framework/logo.scss, so we should keep this import with ?raw

regex used

$ rg --multiline -l "import.+(.+\.svg\?raw)"

Why not update this in mass?

There could be some legitimate reasons to import SVGs a HTML, such as using JS to alter its contents to animate, etc. I haven't seen this at use in GitLab.

Edited Jul 11, 2023 by Miguel Rincon