把svg图标制作成字体图标_创建2状态SVG驱动的动画图标

把svg图标制作成字体图标

vue-svg转换 (vue-svg-transition)

Create 2-state, SVG-powered animated icons.

创建由SVG驱动的2状态动画图标。

快速开始 (Quick start)

npm install --save vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);

范本范例 (Template Example)

It is recommended to use vue-svg-loader so we can import our SVGs from external files. But it's possible to use inline SVG as well.

建议使用vue-svg-loader以便我们可以从外部文件导入vue-svg-loader 。 但是也可以使用内联SVG。

<template>
    <svg-transition :size="size">
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
    data() {
        return {
            size: {
                width: 48,
                height: 48
            }
        }
    }
}
</script>

Trigger programmatically via ref

通过ref编程方式触发

<svg-transition ref="transition" trigger="none">
<!-- your icons -->
</svg-transition>

<script>
export default {
    mounted() {
        this.$refs.transition.performTransition();
    }
}
</script>

文献资料 (Documentation)

道具 (Props)

size

尺寸

The size of the SVG viewbox.

SVG视图框的大小。

• type: Object

  类型： Object

• default: { width: 32, height: 32 }

  默认值： { width: 32, height: 32 }

duration

持续时间

The duration of the transition in ms

过渡持续时间(毫秒)

• type: Number

  类型： Number

• default: 200

  默认值： 200

trigger

触发

The action that triggers the transition. Can be click, hover or none (if you want to trigger it programmatically).

触发过渡的动作。 可以click ， hover或none click (如果要以编程方式触发它)。

• type: String

  类型： String

• default: click

  默认值： click

插槽 (Slots)

initial

初始

The SVG that will be initially displayed

最初显示的SVG

default

默认

The other SVG that will be transitioned to

另一个将转换到的SVG

翻译自: https://vuejsexamples.com/create-2-state-svg-powered-animated-icons/

把svg图标制作成字体图标