소개

Storybook with Vue에서 SVG를 표시하는 데 실패했기 때문에 해결책을 기록해 둡니다.
SVG는 vue-svg-loader을 사용하여 번들로 제공됩니다.

결론만 보고 싶은 분은 이하 링크만 봐 주세요.
해결책입니다

환경

Vue: 2.6.10
스토리북: 5.1.9
vue-svg-loader: 0.12.0

표시할 수 없음

설정 아이콘을 표시하는 구성 요소를 준비합니다.

<template>
  <setting-svg />
</template>

<script lang="ts">
import Vue from "vue";
import SettingSvg from "@/assets/img/svg/setting.svg";

export default Vue.extend({
  name: "SettingIcon",
  components: {
    SettingSvg
  }
});
</script>

Storybook을 준비합니다.

import { storiesOf } from "@storybook/vue";
import SettingIcon from "./SettingIcon.vue";

storiesOf("Icon", module).add("設定アイコン", () => ({
  components: { SettingIcon },
  template: "<setting-icon />"
}));

이제 아이콘을 표시할 준비가 되었습니다.
Storybook을 시작합니다.

$ start-storybook

오류가 발생하지 않습니다. 잘했다고 생각 Storybook을 표시합니다.



아무것도 표시되지 않습니다. 힘들다.
Storybook의 webpack.config.js를 확인하십시오.

const path = require("path");
const rootPath = path.resolve(__dirname, "../src");

module.exports = async ({ config, mode }) => {
  config.resolve.alias["@"] = rootPath;
  config.resolve.alias["~"] = rootPath;

  config.module.rules.push({
    test: /\.s?css$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
  });

  config.module.rules.push({
    test: /\.svg(\?.*)?$/,
    loaders: ["vue-svg-loader"]
  });

  return config;
};

config.module.rules 의 SVG 부분을 출력해 봅니다.

[
  {
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
    loader: '/Users/numatakeisuke/working/project/memory-album/node_modules/file-loader/dist/cjs.js',
    query: { name: 'static/media/[name].[hash:8].[ext]' }
  },
  { test: /\.svg(\?.*)?$/, loaders: [ 'vue-svg-loader' ] }
]

SVG에 기본적으로 file-loader가 맞는 것을 볼 수 있습니다.png 등은 남겨두고 싶으므로 svg 로더 설정만 바꿉니다.

해결책

webpack.config.js 를 수정합니다.
SVG가 file-loader 대상에서 제외되었습니다.

const path = require("path");
const rootPath = path.resolve(__dirname, "../src");

module.exports = async ({ config, mode }) => {
  config.resolve.alias["@"] = rootPath;
  config.resolve.alias["~"] = rootPath;

  config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes("svg")) {
      const test = rule.test
        .toString()
        .replace("svg|", "")
        .replace(/\//g, "");
      return { ...rule, test: new RegExp(test) };
    } else {
      return rule;
    }
  });

  config.module.rules.push({
    test: /\.s?css$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
  });

  config.module.rules.push({
    test: /\.svg(\?.*)?$/,
    loaders: ["vue-svg-loader"]
  });

  return config;
};

Storybook을 다시 시작하면 안전하게 표시되었습니다.

참고