更新记录

2.0.0（2025-06-02） 下载此版本

• 适配tui-plus-v3 完善增加各端支持

1.0.3（2024-11-25） 下载此版本

• 更新文档

1.0.2（2024-11-23） 下载此版本

• 更新文档

平台兼容性

云端兼容性

uni-app(4.66)

uni-app x(4.66)

Svg 组件

渲染 Svg 图标，支持配置图标来源等

支持平台

示例

<template>
    <t-page title='svg' main-class='p-30'>
        <t-card title="Svg" sub-title="支持安卓,IOS,web-支持网络路径和字符串格式" main-class="mb-30"></t-card>
        <t-section title="字符串" main-class="mb-30"></t-section>
        <t-col main-class="tdr tdb mb-30 p-30">
            <t-svg :src="src" main-class="twh-50" />
        </t-col>
        <t-section title="网络" main-class="mb-30"></t-section>
        <t-col main-class="tdr tdb mb-30 p-30">
            <t-svg src="https://life.yundie.xyz/tuiplus/static/svg/adafruit.svg" main-class="twh-50" />
        </t-col>
        <t-section title="路径" main-class="mb-30"></t-section>
        <t-col main-class="tdr tdb mb-30 p-30">
            <t-svg src="/pagesA/static/svg/adafruit.svg" main-class="twh-50" />
        </t-col>
    </t-page>
</template>

<script>
    export default {
        data() {
            return {
                // XML资源
                src: '<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="24" r="3" fill="#333"/><circle cx="24" cy="24" r="3" fill="#333"/><circle cx="36" cy="24" r="3" fill="#333"/></svg>'
            }
        },
        onLoad() {

        }
    }
</script>

Props

Events

Slots