svg封装组件

1、viewport与viewBox

viewBox的默认大小为20px*20px，用法如下：

<svg viewBox="0 0 20 20">
 <line x1="0" y1="0" x2="10" y2="10" stroke-width="2" stroke="currentColor" />
</svg>

viewBox其实描述的是一张20px*20px大小的画布，其内部无论做线还是面所用的坐标均基于此。而viewport描述的值意义在于将这块画布拉伸或缩放到一个什么样的尺寸。

2、preserveAspectRatio

当viewport和viewBox大小不匹配时，两者该如何对齐，就由preserveAspectRatio属性调节

preserveAspectRatio属性值	意义
xMidYMid meet	将viewBox置于viewport中央
xMinYMin meet	将viewBox置于viewport左下
xMinYMax meet	将viewBox置于viewport左上
none	不保持宽高比，缩放图像适合整个viewBox

重要单词释意	意义
Min	将viewBox左沿与viewport左边对齐，或将viewBox上沿与viewport上边对齐
Max	将viewBox右沿与viewport右边对齐，或将viewBox下沿与viewport下边对齐
meet	保持宽高比并将viewBox缩放为适合viewport的大小
slice	保持宽高比并将所有不在viewport中的viewBox裁剪掉，优先选择较大的压缩比
none	不保持宽高比，缩放图像适合整个viewBox，x，y各按自己的缩放比进行缩放

3、refs,g

'更多'组件

组件定义

//Test.vue
<template>
    <svg width="100" height="100" viewBox="0 0 100 100">
        <defs>
            <g id="more"> 
                <circle r="5" cx="20" cy="25" fill="currentColor" />
                <circle r="5" cx="20" cy="50" fill="currentColor" />
                <circle r="5" cx="20" cy="75" fill="currentColor" />
                <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="currentColor" />
                <line x1="40" y1="50" x2="90" y2="50" stroke-width="8" stroke="currentColor" />
                <line x1="40" y1="75" x2="90" y2="75" stroke-width="8" stroke="currentColor" />
            </g>
        </defs>
    </svg>
</template>
<script setup>
    import {ref,getInstance} from 'vue'
</script>
<style lang="scss" scoped>

</style>

组件引用

<template>
  <test-one class="test" :style="{width:'100px',height:'100px'}" />
  <svg width="30" height="30" viewBox="0 0 100 100">
    <use href="#more"></use>
  </svg>
</template>

4、symbol

g标签无法给定viewBox,需要在引用时给定，但引用时不一定知道定义时的viewBox，使用symbol替换g可以在定义时给定viewBox。

定义组件

<template>
    <svg>
        <defs>
            <symbol id="more" viewBox="0 0 100 100"> 
                <circle r="5" cx="20" cy="25" fill="currentColor" />
                <circle r="5" cx="20" cy="50" fill="currentColor" />
                <circle r="5" cx="20" cy="75" fill="currentColor" />
                <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="currentColor" />
                <line x1="40" y1="50" x2="90" y2="50" stroke-width="8" stroke="currentColor" />
                <line x1="40" y1="75" x2="90" y2="75" stroke-width="8" stroke="currentColor" />
            </symbol>
        </defs>
    </svg>
</template>
<script setup>
    import {ref,getInstance} from 'vue'
</script>
<style lang="scss" scoped>

</style>

引用组件

<template>
  <test-one class="test" :style="{width:'100px',height:'100px'}" />
  <svg width="30" height="30" >
    <use href="#more"></use>
  </svg>
</template>

右实心箭头

右实心箭头

<symbol id="filledArrowRight" viewBox="0 0 100 100"> 
     <polyline points="20 10,80 50,20 90" fill="currentColor" />
</symbol>

右箭头

右箭头

            <symbol id="arrowRight" viewBox="0 0 100 100"> 
                <polyline points="20 15,80 50,20 85" fill="transparent" stroke="currentColor" stroke-width="2"/>
            </symbol>

5、Icon组件

组件本身

<template>
    <svg :height="style.height" :width="style.width" :style="{...styleObject}">
        <use :href="iconHref"></use>
    </svg>
</template>
<script setup>
import {ref,defineProps} from 'vue'
const props = defineProps({
    iconName:String,
    style:{
        type:Object,
        value:{
            height:'',
            width:''
        }
    }
})
let iconHref = `#${props.iconName}`
console.log(props)
</script>
<style lang="scss" scoped>

</style>

引用

<test-one class="test" :style="{width:'100px',height:'100px'}" />
<icon iconName="arrowRight"  :style="{width:'30px',height:'30px',color:'red'}"></icon>

5、图标库

图标库中图标-棒球

（1）、拷贝项目下面生成的symbol代码：
在阿里图标库中创建项目，选择图标，注意是symbol类型，点击生成链接

    <script src="https://at.alicdn.com/t/font_2570965_q10rfu48m4m.js"></script>

（2）、加入通用css代码（引入一次就行）：

<template>
    <div class="icon_wrapper" :style="{...style}">
        <svg class="icon">
            <use :href="iconHref"></use>
        </svg>
    </div>
    
</template>
<script setup>
import {ref,defineProps} from 'vue'
const props = defineProps({
    iconName:String,
    prefix:String,
    style:Object
})
let iconHref = `#${props.prefix}-${props.iconName}`
console.log(props)
</script>
<style lang="scss" scoped>
    .icon_wrapper{
        display:inline-block;
    }
    .icon {
        width:100%;
        height:100%;
        vertical-align:-0.15em;
        fill:currentColor;
        overflow:hidden;
    }
</style>
</style>

（3）、挑选相应图标并后去类名，应用于页面：

<icon prefix="icon" iconName="bangqiu"  :style="{width:'30px',height:'30px',color:'red'}"></icon>

vue项目中报错

can't resolve 'core-js/modules/es......'

是因为使用Babel的7.4.3版本时，@babel/polyfill可能无法正常工作.相反，请手动添加core-js和regenerator-runtime.
npm i --save core-js regenerator-runtime