VUE-cli3使用 svg-sprite-loader

1、npm install svg-sprite-loader --save-dev

2、在Vue.config.js加入处理 svg 的 loader并删除默认配置中处理svg

3、新建icons文件夹，icons/svg存放svg，icons/index配置自动导入代码

        import Vue from 'vue'

        import SvgIcon from '@/components/SvgIcon' // svg组件

        // register globally

        Vue.component('svg-icon', SvgIcon)

        const requireAll = requireContext => requireContext.keys().map(requireContext)

        const req = require.context('./svg', false, /\.svg$/)

        requireAll(req)

4、新建SvgIcon组件

        <template>

            <svg :class="svgClass" aria-hidden="true">

                <use :xlink:href="iconName"/>

            </svg>

        </template>

        <script>

            export default {

                name: 'SvgIcon',

                props: {

                iconClass: {

                    type: String,

                    required: true

                    },

                className: {

                    type: String,

                    default: ''

                    }

                },

        computed: {

            iconName() {

                return `#icon-${this.iconClass}`

            },

            svgClass() {

                if (this.className) {

                    return 'svg-icon ' + this.className

                } else {

                    return 'svg-icon'

                    }

            }

        }

        }

    </script>

<style scoped>

.svg-icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

</style>

5、使用<svg-icon icon-class="eye" style="width:60px;"/>