更新记录

1.0.5（2023-10-24）

• 兼容uvue编译

1.0.4（2023-10-24）

• 优化代码

1.0.3（2023-10-13）

• 增加案例

平台兼容性

UTS环境兼容性

sn-uts-svg

sn-uts-svg组件是uts组件，实现了svg组件

注意

• sn-uts-svg支持app-nvue、uni-app x的uvue
• App-Android平台要求Android5（API Leavel 21）及以上系统
• App-iOS平台要求iOS11及以上版本系统
• 关于uvue使用打包编译报错，可能是编译问题，请使用3.94或最新hbx

属性说明

代码示例

• nvue

<template>
    <view style="align-items: center; flex: 1">
        <sn-uts-svg style="width: 100rpx; height: 100rpx" src="/static/svg/save-one.svg" @click="test" />
        <sn-uts-svg style="width: 100rpx; height: 100rpx; margin-top: 20rpx" src="/static/svg/test.svg" />
        <sn-uts-svg style="width: 100rpx; height: 100rpx; margin-top: 20rpx" :src="svgSrc" />
        <view style="flex: 1; width: 750rpx; margin-top: 20rpx">
            <button type="default" @click="change">改变svg</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            svgSrc: '/static/svg/movie.svg',
            fillColor: '#f8f500'
        };
    },
    computed: {
        source1() {
            return `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M24 6V42C17 42 11.7985 32.8391 11.7985 32.8391H6C4.89543 32.8391 4 31.9437 4 30.8391V17.0108C4 15.9062 4.89543 15.0108 6 15.0108H11.7985C11.7985 15.0108 17 6 24 6Z"
                fill="${this.fillColor}" stroke="#333" stroke-width="4" stroke-linejoin="round" />
              <path d="M32 24H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M38 18V30" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            `.replace(/[\t\r\n]/g, '');
        }
    },
    methods: {
        test() {
            uni.showToast({
                title: 'click'
            });
        },
        change() {
            this.fillColor = 'red';
            this.svgSrc = this.source1;
        }
    }
};
</script>

<style></style>

• uvue

<template>
    <view style="align-items: center; flex: 1">
        <sn-uts-svg style="width: 100rpx; height: 100rpx" src="/static/svg/save-one.svg" @click="test" />
        <sn-uts-svg style="width: 100rpx; height: 100rpx; margin-top: 20rpx" src="/static/svg/test.svg" />
        <sn-uts-svg style="width: 100rpx; height: 100rpx; margin-top: 20rpx" :src="svgSrc" />
        <view style="flex: 1; width: 750rpx; margin-top: 20rpx">
            <button type="default" @click="change">改变svg</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            svgSrc: '/static/svg/movie.svg',
            fillColor: '#f8f500'
        };
    },
    computed: {
        source1(): string {
        return `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M24 6V42C17 42 11.7985 32.8391 11.7985 32.8391H6C4.89543 32.8391 4 31.9437 4 30.8391V17.0108C4 15.9062 4.89543 15.0108 6 15.0108H11.7985C11.7985 15.0108 17 6 24 6Z"
        fill="${this.fillColor}" stroke="#333" stroke-width="4" stroke-linejoin="round" />
      <path d="M32 24H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
      <path d="M38 18V30" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>`
            .replace(/[\t\r\n]/g, '')
            .trim();
    }
    },
    methods: {
        test() {
            uni.showToast({
                title: 'click'
            });
        },
        change() {
            this.fillColor = 'red';
            this.svgSrc = this.source1;
        }
    }
};
</script>

<style></style>

svg资源推荐

• yesicon
• iconfont
• iconpark