<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import ColorSvg from '@/components/base/images/ColorSvg.vue';
const span = 12
</script>

<template>
    <el-row class="wrapper layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import ColorSvg from '@/components/base/images/ColorSvg.vue';
<template>
    <color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
    <color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
</template>
`}}
</pre>
            <color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
            <color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped></style>