vue3.0 + svg 图标

1、安装svg：

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

2、在 components 中，创建 SvgIcon，引入 svg 样式：

index.vue：

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" aria-hidden="true" />
    </svg>
</template>

<script>
    import { defineComponent, computed } from "vue";
    export default defineComponent({
        name: "svg-icon",
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ""
            }
        },
        setup(props) {
            console.log(props.iconClass);
            const iconName = computed(() => `#icon-${props.iconClass}`);
            const svgClass = computed(() => {
                if (props.className) {
                    return "svg-icon " + props.className;
                } else {
                    return "svg-icon";
                }
            });
            return { iconName, svgClass };
        }
    });
</script>

<style scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

 

3、src 新建 icons：

svgo.yml：

# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

 

 

 

 svg 在阿里矢量图下载

例如： 在 src/icons/svg 下，新建 .svg 文件，复制 svg 代码，

https://www.iconfont.cn/search/index?searchType=icon&q=眼睛

 

 eye.svg：

<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

 

4、全局引入svg：

main.ts：

import SvgIcon from '@/components/SvgIcon'  // 引入自定义组件
const req = require.context('./icons/svg', false, /\.svg$/);
const requireAll = (requireContext: any) => requireContext.keys().map(requireContext);
requireAll(req)

createApp(App).component("svg-icon", SvgIcon).mount('#app');

页面上使用：

<template>
    <div>
        交易信息<br/>
        <svg-icon icon-class="eye" class-name="card-panel-icon"/><br/>
        <svg-icon icon-class="eye-open" class-name="card-panel-icon"/>
    </div>
</template>