diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index d67ab48..9b059d9 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -36,7 +36,9 @@
       ui="icon"
       @click="localExpanded = !localExpanded"
     >
-      <veui-icon :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"/>
+      <veui-icon
+        :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
+      />
     </veui-button>
   </section>
   <section
@@ -96,11 +98,16 @@ export default {
   },
   methods: {
     play () {
-      createCodeSandbox(this.$refs.source.textContent.replace(/from 'veui'/g, 'from \'veui/dist/veui.esm\''))
+      createCodeSandbox(preprocess(this.$refs.source.textContent))
     }
   }
 }
 
+function preprocess (code) {
+  return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
+    .replace(/(?:import 'veui-theme-dls-icons[^']+'\n)+/g, `import 'veui-theme-dls-icons/dist/icons.esm'\n`)
+}
+
 Icon.register({
   'one-demo-code': {
     width: 24,
diff --git a/components/play.js b/components/play.js
index 3764a36..7fe9d7e 100644
--- a/components/play.js
+++ b/components/play.js
@@ -28,8 +28,8 @@ export function createCodeSandbox (sfc) {
 
 const meta = `{
   "dependencies": {
-    "veui": "2.1.1",
-    "veui-theme-dls": "2.1.1",
+    "veui": "2.1.2",
+    "veui-theme-dls": "2.1.2",
     "vue": "2.6.14"
   }
 }