Как решить данную проблему?
Функция require, очевидно, исполняется* во время создания(декларации) экспортируемого объекта, задолго до того как этот объект попадёт в Vue и превратится в Vue-компонент.
Функция require, очевидно, исполняется в глобальном контексте, в котором недоступен (какой-либо) this.

Нормальное решение вашей проблемы выглядит примерно так.
<template>
  <div>
    <component :is="SvgView" class="sp-svg-styles"/>
  </div>
</template>

<script>
export default{
  props:['name'],
  computed: {
    SvgView() {
      return require('./../Icons/'+this.name+'.svg');
    }
  }
}
</script>

*require на самом деле работает на этапе компиляции, подготавливая и загружая в бандл все файлы по маске ./../Icons/*.svg, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.
Никогда так не делал, но выглядит как будто компоненты загружаются раньше пропсов, не?