让前端设计了一个svg的登入界面，怎么引入vue中

svg中代码输入框和按钮区域是要替换掉吗。
我先用html引入svg,再在vue中引入html是否正确

请看👉 ：如何在vue项目中引入svg图标

通过img标签可以直接引入svg

可以直接把SVG封装成组件，然后直接引入

1.首先在Iconfont里下载了svg文件后，放入到本地src/assets/icons下面。

2.我在组件中直接进行导入引用，这时候TS就报错了。TS2307找不到模块。

3.爬墙搜索。

4.按照回答操作一下。在shims-vue.d.ts中粘贴进去。

declare module '*.svg'
{
  const content:string;
  export default content;
}

5.回去看一下引入，不报错了。

6.但是发现引入的是一个字符串，是svg的路径。我要引入的是SVG的使用方法。

7.去搜索一下大家是怎么引用的，知道目前的最流行的svg引入办法是使用Svg-sprite-loader。

8.安装

yarn add svg-sprite-loader -D

9.在vue.config.js中添加

const path = require('path')
module.exports = {

  "lintOnSave": false,

  "transpileDependencies": [

    "vuetify"

  ],

   config.module

      .rule('svg-sprite')

      .test(/\.svg$/)

      .include.add(dir).end() // 包含 icons 目录

      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()

        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])

    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

    // config.module

    //   .rule('svg-sprite')

    //   .test(/\.(svg)(\?.*)?$/)

    //   .include.add(dir).end()

    //   .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract: false}).end()

    //   .use('svgo-loader').loader('svgo-loader')

    //   .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]}))

    //   .end()

    // config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])

    // config.module.rule('svg').exclude.add(dir)

}

}

10.这时候就可以在项目中可以使用use标签引入icon。

但是如果我们项目中的Icon很多，这样引入的话就很麻烦。

如何快速引入多个icon?
1.import整个目录

let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try{

  importAll(require.context(path:'../assets/icons',true,/\.svg$/));

}catch(error){

  console.log(error);

}

2.封装一个Icon组件
1.在components中新建一个Icon组件。

<template>
    <svg>

        <use :xlink:href="'#'+name"></use>

    </svg>

</template>

<script lang="ts">

    const importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);

    try{importAll(require.context('../assets/icons',true,/\.svg$/));}catch(error){console.log(error);}

    export default {

        props:['name'],

        name:'Icon'

    };

</script>

2.让Icon可以全局使用。在main.ts中引入Icon

import Icon from '@/components/Icon.vue';
Vue.component('Icon',Icon)

3.在组件中直接使用Icon 组件即可。

name 就是你要传过去的svg的id。

这样引入就非常的方便高效了。

直接引入svg即可

封装成组件再引入

1.直接放入代码中使用

img

2.将svg代码放入一个位置,进行组件封装 用子组件代替
3.svg 引入 用img 打开

img

img

img