微信小程序 使用svg图标

SVG源

<svg style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" ></path><path d="M338.282667 810.666667a64 64 0 1 1 0 128 64 64 0 0 1 0-128zM789.333333 810.666667a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m-489.642666-82.773334l-0.256-0.085333a31.872 31.872 0 0 1-17.962667-17.237333 29.162667 29.162667 0 0 1-1.578667-4.586667l-0.213333-0.853333a32.213333 32.213333 0 0 1-0.64-3.797334l0.32 2.197334-0.064-0.384L189.226667 160H106.666667v-64h109.717333a32 32 0 0 1 30.954667 23.914667l0.618666 2.858666 22.314667 134.741334H896a32 32 0 0 1 31.872 34.858666l-0.362667 2.773334-73.173333 408.405333a32 32 0 0 1-31.488 26.346667h-512c-3.904 0-7.68-0.704-11.157333-2.005334z" fill="#111111"></path></svg>

转为 BASE64

PHN2ZyBzdHlsZT0id2lkdGg6IDFlbTtoZWlnaHQ6IDFlbTt2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO2ZpbGw6IGN1cnJlbnRDb2xvcjtvdmVyZmxvdzogaGlkZGVuOyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDBoMTAyNHYxMDI0SDB6IiBmaWxsPSIjRkZGRkZGIiA+PC9wYXRoPjxwYXRoIGQ9Ik0zMzguMjgyNjY3IDgxMC42NjY2NjdhNjQgNjQgMCAxIDEgMCAxMjggNjQgNjQgMCAwIDEgMC0xMjh6TTc4OS4zMzMzMzMgODEwLjY2NjY2N2E2NCA2NCAwIDEgMSAwIDEyOCA2NCA2NCAwIDAgMSAwLTEyOHogbS00ODkuNjQyNjY2LTgyLjc3MzMzNGwtMC4yNTYtMC4wODUzMzNhMzEuODcyIDMxLjg3MiAwIDAgMS0xNy45NjI2NjctMTcuMjM3MzMzIDI5LjE2MjY2NyAyOS4xNjI2NjcgMCAwIDEtMS41Nzg2NjctNC41ODY2NjdsLTAuMjEzMzMzLTAuODUzMzMzYTMyLjIxMzMzMyAzMi4yMTMzMzMgMCAwIDEtMC42NC0zLjc5NzMzNGwwLjMyIDIuMTk3MzM0LTAuMDY0LTAuMzg0TDE4OS4yMjY2NjcgMTYwSDEwNi42NjY2Njd2LTY0aDEwOS43MTczMzNhMzIgMzIgMCAwIDEgMzAuOTU0NjY3IDIzLjkxNDY2N2wwLjYxODY2NiAyLjg1ODY2NiAyMi4zMTQ2NjcgMTM0Ljc0MTMzNEg4OTZhMzIgMzIgMCAwIDEgMzEuODcyIDM0Ljg1ODY2NmwtMC4zNjI2NjcgMi43NzMzMzQtNzMuMTczMzMzIDQwOC40MDUzMzNhMzIgMzIgMCAwIDEtMzEuNDg4IDI2LjM0NjY2N2gtNTEyYy0zLjkwNCAwLTcuNjgtMC43MDQtMTEuMTU3MzMzLTIuMDA1MzM0eiIgZmlsbD0iIzExMTExMSI+PC9wYXRoPjwvc3ZnPg==

在微信小程序 wxss文件中使用

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBzdHlsZT0id2lkdGg6IDFlbTtoZWlnaHQ6IDFlbTt2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO2ZpbGw6IGN1cnJlbnRDb2xvcjtvdmVyZmxvdzogaGlkZGVuOyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDBoMTAyNHYxMDI0SDB6IiBmaWxsPSIjRkZGRkZGIiA+PC9wYXRoPjxwYXRoIGQ9Ik0zMzguMjgyNjY3IDgxMC42NjY2NjdhNjQgNjQgMCAxIDEgMCAxMjggNjQgNjQgMCAwIDEgMC0xMjh6TTc4OS4zMzMzMzMgODEwLjY2NjY2N2E2NCA2NCAwIDEgMSAwIDEyOCA2NCA2NCAwIDAgMSAwLTEyOHogbS00ODkuNjQyNjY2LTgyLjc3MzMzNGwtMC4yNTYtMC4wODUzMzNhMzEuODcyIDMxLjg3MiAwIDAgMS0xNy45NjI2NjctMTcuMjM3MzMzIDI5LjE2MjY2NyAyOS4xNjI2NjcgMCAwIDEtMS41Nzg2NjctNC41ODY2NjdsLTAuMjEzMzMzLTAuODUzMzMzYTMyLjIxMzMzMyAzMi4yMTMzMzMgMCAwIDEtMC42NC0zLjc5NzMzNGwwLjMyIDIuMTk3MzM0LTAuMDY0LTAuMzg0TDE4OS4yMjY2NjcgMTYwSDEwNi42NjY2Njd2LTY0aDEwOS43MTczMzNhMzIgMzIgMCAwIDEgMzAuOTU0NjY3IDIzLjkxNDY2N2wwLjYxODY2NiAyLjg1ODY2NiAyMi4zMTQ2NjcgMTM0Ljc0MTMzNEg4OTZhMzIgMzIgMCAwIDEgMzEuODcyIDM0Ljg1ODY2NmwtMC4zNjI2NjcgMi43NzMzMzQtNzMuMTczMzMzIDQwOC40MDUzMzNhMzIgMzIgMCAwIDEtMzEuNDg4IDI2LjM0NjY2N2gtNTEyYy0zLjkwNCAwLTcuNjgtMC43MDQtMTEuMTU3MzMzLTIuMDA1MzM0eiIgZmlsbD0iIzExMTExMSI+PC9wYXRoPjwvc3ZnPg==");
  background-size: cover;
  width:100rpx;
  height: 100rpx;
}