面试题：Vue中如何在组件内引入并使用SVG图标

Question

请描述在Vue项目中，如何将SVG图标引入到一个组件内并进行显示，包括可能涉及到的工具或插件，以及基本的代码实现步骤。

Answer 1

1. 使用 vue-svg-loader 插件

1. 安装插件： 在项目根目录下运行 npm install vue-svg-loader --save-dev 或 yarn add vue-svg-loader -D。
2. 配置 webpack： 在 webpack 配置文件（通常是 vue.config.js）中添加如下内容：

   const path = require('path');
   module.exports = {
     chainWebpack: (config) => {
       const svgRule = config.module.rule('svg');
       svgRule.uses.clear();
       svgRule
        .test(/\.svg$/)
        .include.add(path.resolve(__dirname, 'src/icons'))
        .end()
        .use('vue-svg-loader')
        .loader('vue-svg-loader');
     }
   };
   

   上述配置中，将 src/icons 目录下的 svg 文件交给 vue-svg-loader 处理。
3. 引入并使用： 在组件中可以这样引入和使用 svg 图标：

   <template>
     <div>
       <svg-icon name="your-icon-name"></svg-icon>
     </div>
   </template>
   
   <script>
   import SvgIcon from '@/components/SvgIcon.vue';
   export default {
     components: {
       SvgIcon
     }
   };
   </script>
   

   这里假设在 @/components/SvgIcon.vue 组件中实现了 svg 图标的具体渲染逻辑，name 属性指定要显示的 svg 图标名称。

2. 使用 @svg - loader 插件（另一种选择）

1. 安装插件： 运行 npm install @svg - loader/vue --save-dev 或 yarn add @svg - loader/vue -D。
2. 配置 webpack： 在 vue.config.js 中添加如下配置：

   module.exports = {
     chainWebpack: (config) => {
       config.module
        .rule('svg')
        .exclude.add(/node_modules/)
        .end();
       config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(path.resolve(__dirname, 'src/icons'))
        .end()
        .use('@svg - loader/vue')
        .loader('@svg - loader/vue');
     }
   };
   

3. 引入并使用： 在组件中引入使用方式类似：

   <template>
     <div>
       <MySvgIcon></MySvgIcon>
     </div>
   </template>
   
   <script>
   import MySvgIcon from '@/icons/your - svg - icon.vue';
   export default {
     components: {
       MySvgIcon
     }
   };
   </script>
   

   这里假设 @/icons/your - svg - icon.vue 是通过 @svg - loader/vue 生成的包含 svg 内容的 vue 组件。

3. 直接在模板中嵌入 SVG

1. 不借助插件： 直接将 svg 代码嵌入到组件模板中。

   <template>
     <div>
       <svg viewBox="0 0 100 100">
         <path d="M10 10 L90 10 L90 90 L10 90 Z" fill="blue"></path>
       </svg>
     </div>
   </template>
   

   这种方式适合简单的、少量的 svg 图标，直接在模板中编写 svg 代码，无需额外插件。但如果 svg 图标复杂或数量较多，维护起来比较麻烦。