[demo]Update for icon plugin

demo/package.json

@@ -7,10 +7,12 @@
         "@sveltejs/vite-plugin-svelte": "^2.4.2",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.27",
+        "stdf": "file:../packages/stdf",
         "svelte": "^4.1.1",
         "svelte-spa-router": "^3.3.0",
         "tailwindcss": "^3.3.3",
-        "vite": "^4.4.6"
+        "vite": "^4.4.6",
+        "rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon"
     },
     "scripts": {
         "dev": "vite",

demo/src/App.svelte

@@ -2,9 +2,9 @@
     import { setContext, onMount } from 'svelte';
     import Router, { querystring, location, push } from 'svelte-spa-router';
     import { routes, routes_en } from './route';
-    import { NavBar, Icon } from '../../packages/stdf/components';
-    import zh_CN from '../../packages/stdf/lang/zh_CN';
-    import en_US from '../../packages/stdf/lang/en_US';
+    import { NavBar, Icon } from 'stdf';
+    import zh_CN from 'stdf/dist/lang/zh_CN';
+    import en_US from 'stdf/dist/lang/en_US';
     import menuList from './data/menuList';
 
     // 循环 menuList，将所有元素的 childs 组成一个数组

demo/src/pages/actionSheet/ActionSheetDemo.svelte

@@ -1,6 +1,6 @@
 <!-- ActionSheet Demo -->
 <script>
-    import { Cell, ActionSheet, Toast } from '../../../../packages/stdf/components';
+    import { Cell, ActionSheet, Toast } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/actionSheet/ActionSheetDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- ActionSheet Demo -->
 <script>
-    import { Cell, ActionSheet, Toast } from '../../../../packages/stdf/components';
+    import { Cell, ActionSheet, Toast } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/asyncPicker/AsyncPickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- AsyncPicker Demo -->
 <script>
-    import { AsyncPicker, Cell } from '../../../../packages/stdf/components';
+    import { AsyncPicker, Cell } from 'stdf';
     // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
     import { linkageData, linkageDiffLabeData } from './data';
 

demo/src/pages/asyncPicker/AsyncPickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- AsyncPicker Demo -->
 <script>
-    import { AsyncPicker, Cell } from '../../../../packages/stdf/components';
+    import { AsyncPicker, Cell } from 'stdf';
     // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
     import { linkageData, linkageDiffLabeData } from './data_en';
 

demo/src/pages/avatar/AvatarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-    import { Avatar } from '../../../../packages/stdf/components';
+    import { Avatar } from 'stdf';
 
     const icons = [
         { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },

demo/src/pages/avatar/AvatarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-    import { Avatar } from '../../../../packages/stdf/components';
+    import { Avatar } from 'stdf';
 
     const icons = [
         { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },

demo/src/pages/badge/BadgeDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Badge Demo -->
 <script>
-    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../packages/stdf/components';
+    import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
 
     let isShow = true;
     const changeShowFun = () => {

demo/src/pages/badge/BadgeDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Badge Demo -->
 <script>
-    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../packages/stdf/components';
+    import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
 
     let isShow = true;
     const changeShowFun = () => {

demo/src/pages/bottomSheet/BottomSheetDemo.svelte

@@ -1,6 +1,6 @@
 <!-- BottomSheet Demo -->
 <script>
-    import { BottomSheet, Cell, Toast, Button } from '../../../../packages/stdf/components';
+    import { BottomSheet, Cell, Toast, Button } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/bottomSheet/BottomSheetDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- BottomSheet Demo -->
 <script>
-    import { BottomSheet, Cell, Toast, Button } from '../../../../packages/stdf/components';
+    import { BottomSheet, Cell, Toast, Button } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/button/ButtonDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Button Demo -->
 <script>
-    import { Button, Icon, Toast, Loading } from '../../../../packages/stdf/components';
+    import { Button, Icon, Toast, Loading } from 'stdf';
 
     let visible = false;
 </script>

demo/src/pages/button/ButtonDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Button Demo -->
 <script>
-    import { Button, Icon, Toast, Loading } from '../../../../packages/stdf/components';
+    import { Button, Icon, Toast, Loading } from 'stdf';
 
     let visible = false;
 </script>

demo/src/pages/calendar/CalendarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Calendar Demo -->
 <script>
-    import { Cell, Calendar } from '../../../../packages/stdf/components';
+    import { Cell, Calendar } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/calendar/CalendarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Calendar Demo -->
 <script>
-    import { Cell, Calendar } from '../../../../packages/stdf/components';
+    import { Cell, Calendar } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/cell/CellDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Cell Demo -->
 <script>
-    import { Cell, CellGroup, Toast } from '../../../../packages/stdf/components';
+    import { Cell, CellGroup, Toast } from 'stdf';
 
     let visible = false;
 </script>

demo/src/pages/cell/CellDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Cell Demo -->
 <script>
-    import { Cell, CellGroup, Toast } from '../../../../packages/stdf/components';
+    import { Cell, CellGroup, Toast } from 'stdf';
 
     let visible = false;
 </script>

demo/src/pages/checkbox/CheckboxDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Checkbox Demo -->
 <script>
-    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../packages/stdf/components';
+    import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
     import { onMount } from 'svelte';
     import { quintOut } from 'svelte/easing';
     import { crossfade } from 'svelte/transition';

demo/src/pages/checkbox/CheckboxDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Checkbox Demo -->
 <script>
-    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../packages/stdf/components';
+    import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
     import { onMount } from 'svelte';
     import { quintOut } from 'svelte/easing';
     import { crossfade } from 'svelte/transition';

demo/src/pages/dialog/DialogDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Dialog Demo -->
 <script>
-    import { Dialog, Cell, Toast, Loading } from '../../../../packages/stdf/components';
+    import { Dialog, Cell, Toast, Loading } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/dialog/DialogDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Dialog Demo -->
 <script>
-    import { Dialog, Cell, Toast, Loading } from '../../../../packages/stdf/components';
+    import { Dialog, Cell, Toast, Loading } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/divider/DividerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Divider Demo -->
 <script>
-    import { Divider } from '../../../../packages/stdf/components';
+    import { Divider } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-8 py-8">

demo/src/pages/divider/DividerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Divider Demo -->
 <script>
-    import { Divider } from '../../../../packages/stdf/components';
+    import { Divider } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-8 py-8 text-left">

demo/src/pages/grids/GridsDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Grids Demo -->
 <script>
-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../packages/stdf/components';
+    import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
 
     let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
     let curentIndex = 0;

demo/src/pages/grids/GridsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Grids Demo -->
 <script>
-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../packages/stdf/components';
+    import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
 
     let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
     let curentIndex = 0;

demo/src/pages/home/Home.svelte

@@ -1,6 +1,6 @@
 <script>
     import { push } from 'svelte-spa-router';
-    import { Cell, CellGroup } from '../../../../packages/stdf/components';
+    import { Cell, CellGroup } from 'stdf';
     import menuList from '../../data/menuList';
 
     // 循环 menuList，将所有元素的 childs 组成一个数组

demo/src/pages/icon/IconDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Icon Demo，请确保已引入 symbol.svg 文件。 -->
 <script>
-    import { Icon } from '../../../../packages/stdf/components';
+    import { Icon } from 'stdf';
 
     const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
 </script>

demo/src/pages/icon/IconDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Icon Demo, Please make sure you have been introduced symbol.svg file. -->
 <script>
-    import { Icon } from '../../../../packages/stdf/components';
+    import { Icon } from 'stdf';
 
     const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
 </script>

demo/src/pages/icon/allIcon.md

@@ -1,119 +1,122 @@
-Demo 中用到的所有 Remixicon 如下：
+Demo 中用到的所有 svg 图标
 
--   ri-arrow-left-s-line
--   ri-arrow-right-s-line
--   ri-user-3-line
--   ri-radio-button-line
--   ri-checkbox-blank-circle-line
--   ri-checkbox-fill
--   ri-checkbox-line
--   ri-close-circle-fill
--   ri-image-2-fill
--   ri-movie-2-fill
--   ri-code-box-fill
--   ri-qr-code-fill
--   ri-barcode-fill
--   ri-star-fill
--   ri-close-line
--   ri-volume-down-line
--   ri-arrow-down-s-line
--   ri-plane-fill
--   ri-share-forward-2-fill
--   ri-mic-off-fill
--   ri-hand-heart-line
--   ri-apps-2-line
--   ri-star-line
--   ri-share-forward-line
--   ri-spy-fill
--   ri-chrome-fill
--   ri-riding-line
--   ri-switch-fill
--   ri-home-7-line
--   ri-customer-service-2-line
--   ri-paint-brush-line
--   ri-share-line
--   ri-command-line
--   ri-drag-move-line
--   ri-indent-decrease
--   ri-service-line
--   ri-parent-line
--   ri-bank-line
--   ri-battery-charge-line
--   ri-shopping-basket-line
--   ri-moon-line
--   ri-sun-line
--   ri-bear-smile-line
--   ri-aliens-fill
--   ri-user-smile-line
--   ri-shield-user-line
--   ri-emotion-line
--   ri-plane-line
--   ri-ship-2-line
--   ri-train-line
--   ri-car-line
--   ri-home-3-line
--   ri-home-3-fill
--   ri-compass-3-line
--   ri-compass-3-fill
--   ri-discuss-line
--   ri-discuss-fill
--   ri-account-circle-line
--   ri-account-circle-fill
--   ri-money-cny-circle-line
--   ri-fingerprint-line
--   ri-hotel-bed-line
--   ri-restaurant-2-line
--   ri-cup-line
--   ri-emotion-sad-line
--   ri-zzz-line
--   ri-hotel-bed-fill
--   ri-restaurant-2-fill
--   ri-cup-fill
--   ri-emotion-sad-fill
--   ri-zzz-fill
--   ri-checkbox-circle-line
--   ri-checkbox-circle-fill
--   ri-checkbox-multiple-line
--   ri-checkbox-multiple-fill
--   ri-check-line
--   ri-check-fill
--   ri-arrow-up-s-line
--   ri-arrow-up-s-fill
--   ri-radio-button-fill
--   ri-close-fill
--   ri-lock-line
--   ri-qr-scan-line
--   ri-paint-brush-fill
--   ri-ubuntu-fill
--   ri-command-fill
--   ri-windows-fill
--   ri-android-fill
--   ri-apple-fill
--   ri-bluetooth-line
--   ri-bluetooth-connect-line
--   ri-battery-2-charge-line
--   ri-ubuntu-line
--   ri-macbook-fill
--   ri-computer-line
--   ri-tablet-line
--   ri-smartphone-line
--   ri-wifi-off-line
--   ri-wifi-line
--   ri-heart-3-fill
--   ri-volume-mute-line
--   ri-volume-up-line
--   ri-medal-fill
--   ri-cake-2-fill
--   ri-notification-2-line
--   ri-wireless-charging-line
--   ri-thumb-up-fill
--   ri-phone-fill
--   ri-surgical-mask-fill
--   ri-github-fill
--   ri-compass-line
--   ri-moon-fill
--   ri-close-circle-line
--   ri-error-warning-line
--   ri-information-line
--   ri-more-line
--   ri-more-fill
+- account-circle-fill
+- account-circle-line
+- aliens-fill
+- android-fill
+- apple-fill
+- apps-2-line
+- arrow-down-s-line
+- arrow-left-s-line
+- arrow-right-s-line
+- arrow-up-s-fill
+- arrow-up-s-line
+- bank-line
+- barcode-fill
+- battery-2-charge-line
+- battery-charge-line
+- bear-smile-line
+- bluetooth-connect-line
+- bluetooth-line
+- cake-2-fill
+- car-line
+- check-fill
+- check-line
+- checkbox-blank-circle-line
+- checkbox-circle-fill
+- checkbox-circle-line
+- checkbox-fill
+- checkbox-line
+- checkbox-multiple-fill
+- checkbox-multiple-line
+- chrome-fill
+- close-circle-fill
+- close-circle-line
+- close-fill
+- close-line
+- code-box-fill
+- command-fill
+- command-line
+- compass-3-fill
+- compass-3-line
+- compass-line
+- computer-line
+- cup-fill
+- cup-line
+- customer-service-2-line
+- discuss-fill
+- discuss-line
+- drag-move-line
+- emotion-line
+- emotion-sad-fill
+- emotion-sad-line
+- error-warning-line
+- fingerprint-line
+- github-fill
+- hand-heart-line
+- heart-3-fill
+- home-3-fill
+- home-3-line
+- home-7-line
+- hotel-bed-fill
+- hotel-bed-line
+- image-2-fill
+- indent-decrease
+- information-line
+- lock-line
+- macbook-fill
+- medal-fill
+- mic-off-fill
+- money-cny-circle-line
+- moon-fill
+- moon-line
+- more-fil
+- more-line
+- movie-2-fill
+- notification-2-line
+- paint-brush-fill
+- paint-brush-line
+- parent-line
+- phone-fill
+- plane-fill
+- plane-line
+- qr-code-fill
+- qr-scan-line
+- radio-button-fill
+- radio-button-line
+- restaurant-2-fill
+- restaurant-2-line
+- riding-line
+- send-plane-line
+- service-line
+- share-forward-2-fill
+- share-forward-line
+- share-line
+- shield-user-line
+- ship-2-line
+- shopping-basket-line
+- smartphone-line
+- spy-fill
+- star-fill
+- star-line
+- sun-line
+- surgical-mask-fill
+- survey-fill
+- survey-line
+- switch-fill
+- tablet-line
+- thumb-up-fill
+- train-line
+- ubuntu-fill
+- ubuntu-line
+- user-3-line
+- user-smile-line
+- volume-down-line
+- volume-mute-line
+- volume-up-line
+- wifi-line
+- wifi-off-line
+- windows-fill
+- wireless-charging-line
+- zzz-fill
+- zzz-lin

demo/src/pages/indexBar/IndexBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- IndexBar Demo -->
 <script>
-    import { IndexBar, Button, Toast } from '../../../../packages/stdf/components';
+    import { IndexBar, Button, Toast } from 'stdf';
 
     const addressList = [
         { index: 'A', title: 'A', child: [{ text: '澳门' }, { text: '安宁' }, { text: '安庆' }, { text: '鞍山' }] },

demo/src/pages/indexBar/IndexBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- IndexBar Demo -->
 <script>
-    import { IndexBar, Button, Toast } from '../../../../packages/stdf/components';
+    import { IndexBar, Button, Toast } from 'stdf';
 
     const addressList = [
         { index: 'A', title: 'A', child: [{ text: 'Macau' }, { text: 'Anning' }, { text: 'Anqing' }, { text: 'Anshan' }] },

demo/src/pages/input/InputDemo.svelte

@@ -1,7 +1,7 @@
 <!-- Input Demo -->
 <script>
     import { getContext } from 'svelte';
-    import { Input, Button, Icon, Toast } from '../../../../packages/stdf/components';
+    import { Input, Button, Icon, Toast } from 'stdf';
 
     let value = '初始文本';
     let visible = false;

demo/src/pages/input/InputDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- Input Demo -->
 <script>
     import { getContext } from 'svelte';
-    import { Input, Button, Icon, Toast } from '../../../../packages/stdf/components';
+    import { Input, Button, Icon, Toast } from 'stdf';
 
     let value = 'Init text';
     let visible = false;

demo/src/pages/loading/LoadingDemo.svelte

@@ -1,6 +1,6 @@
 <!--Loading Demo-->
 <script>
-    import { Loading, Tabs, TabContent, Button } from '../../../../packages/stdf/components';
+    import { Loading, Tabs, TabContent, Button } from 'stdf';
 
     //传入个数，返回随机生成的颜色数组
     const randomColorArr = num => {

demo/src/pages/loading/LoadingDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Loading Demo-->
 <script>
-    import { Loading, Tabs, TabContent, Button } from '../../../../packages/stdf/components';
+    import { Loading, Tabs, TabContent, Button } from 'stdf';
 
     //Input the number and return an array of randomly generated colors
     const randomColorArr = num => {

demo/src/pages/mask/MaskDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Mask Demo -->
 <script>
-    import { Mask, Toast, Cell, Button, Popup } from '../../../../packages/stdf/components';
+    import { Mask, Toast, Cell, Button, Popup } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/mask/MaskDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Mask Demo -->
 <script>
-    import { Mask, Toast, Cell, Button, Popup } from '../../../../packages/stdf/components';
+    import { Mask, Toast, Cell, Button, Popup } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/modal/ModalDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Modal Demo -->
 <script>
-    import { Modal, Cell, Toast } from '../../../../packages/stdf/components';
+    import { Modal, Cell, Toast } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/modal/ModalDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Modal Demo -->
 <script>
-    import { Modal, Cell, Toast } from '../../../../packages/stdf/components';
+    import { Modal, Cell, Toast } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/navBar/NavBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- NavBar Demo -->
 <script>
-    import { NavBar, Icon, Toast } from '../../../../packages/stdf/components';
+    import { NavBar, Icon, Toast } from 'stdf';
 
     const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
     const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];

demo/src/pages/navBar/NavBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- NavBar Demo -->
 <script>
-    import { NavBar, Icon, Toast } from '../../../../packages/stdf/components';
+    import { NavBar, Icon, Toast } from 'stdf';
 
     const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
     const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];

demo/src/pages/noticeBar/NoticeBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- NoticeBar Demo -->
 <script>
-    import {NoticeBar, Toast} from '../../../../packages/stdf/components';
+    import {NoticeBar, Toast} from 'stdf';
 
     let textList = ['1. 这是第一条通告内容！', '2. 这是第二条通告内容！'];
     let textLongList = ['1. 这条通告超长长长长长长长长长长长长长长长长长长长长长！', '2. 这是第二条通告内容！'];

demo/src/pages/noticeBar/NoticeBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- NoticeBar Demo -->
 <script>
-    import {NoticeBar, Toast} from '../../../../packages/stdf/components';
+    import {NoticeBar, Toast} from 'stdf';
 
     let textList = ['1. This is the first announcement!', '2. This is the second notice!'];
     let textLongList = ['1. This message long, long, long, long, long, long, long, long, long, long, long, long, long!', '2. This is the second notice!'];

demo/src/pages/pagination/PaginationDemo.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { Pagination, Loading } from '../../../../packages/stdf/components';
+    import { Pagination, Loading } from 'stdf';
     import aphorisms from '../../data/aphorisms';
 
     // 总数，一般是后端接口返回

demo/src/pages/pagination/PaginationDemo_en.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { Pagination, Loading } from '../../../../packages/stdf/components';
+    import { Pagination, Loading } from 'stdf';
     import aphorisms from '../../data/aphorisms';
 
     // total data number, generally, the back-end interface returns

demo/src/pages/picker/PickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Picker Demo -->
 <script>
-    import { Picker, Cell } from '../../../../packages/stdf/components';
+    import { Picker, Cell } from 'stdf';
     // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
     import {
         someProvinceList,

demo/src/pages/picker/PickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Picker Demo -->
 <script>
-    import { Picker, Cell } from '../../../../packages/stdf/components';
+    import { Picker, Cell } from 'stdf';
     // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
     import {
         someProvinceList,

demo/src/pages/placeholder/PlaceholderDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Placeholder Demo -->
 <script>
-    import { Placeholder, Grids, Grid } from '../../../../packages/stdf/components';
+    import { Placeholder, Grids, Grid } from 'stdf';
 </script>
 
 <div class="m-4 font-bold text-lg">基础用法</div>

demo/src/pages/placeholder/PlaceholderDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Placeholder Demo -->
 <script>
-    import { Placeholder, Grids, Grid } from '../../../../packages/stdf/components';
+    import { Placeholder, Grids, Grid } from 'stdf';
 </script>
 
 <div class="m-4 font-bold text-lg">Basic usage</div>

demo/src/pages/popup/PopupDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Popup Demo -->
 <script>
-    import { Cell, Popup, Button, Icon } from '../../../../packages/stdf/components';
+    import { Cell, Popup, Button, Icon } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/popup/PopupDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Popup Demo -->
 <script>
-    import { Cell, Popup, Button, Icon } from '../../../../packages/stdf/components';
+    import { Cell, Popup, Button, Icon } from 'stdf';
     import Aphorism from '../../components/Aphorism.svelte';
 
     let visible1 = false;

demo/src/pages/progress/ProgressDemo.svelte

@@ -1,6 +1,6 @@
 <!--Progress Demo-->
 <script>
-    import { Progress, Button } from '../../../../packages/stdf/components';
+    import { Progress, Button } from 'stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progress/ProgressDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Progress Demo-->
 <script>
-    import { Progress, Button } from '../../../../packages/stdf/components';
+    import { Progress, Button } from 'stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progressLoop/ProgressLoopDemo.svelte

@@ -1,6 +1,6 @@
 <!--ProgressLoop Demo-->
 <script>
-    import { ProgressLoop, Button } from '../../../../packages/stdf/components';
+    import { ProgressLoop, Button } from 'stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progressLoop/ProgressLoopDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--ProgressLoop Demo-->
 <script>
-    import { ProgressLoop, Button } from '../../../../packages/stdf/components';
+    import { ProgressLoop, Button } from 'stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/radio/RadioDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Radio Demo -->
 <script>
-    import { RadioGroup, Radio, Divider, Button } from '../../../../packages/stdf/components';
+    import { RadioGroup, Radio, Divider, Button } from 'stdf';
 
     const dota = [
         { label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },

demo/src/pages/radio/RadioDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Radio Demo -->
 <script>
-    import { RadioGroup, Radio, Divider, Button } from '../../../../packages/stdf/components';
+    import { RadioGroup, Radio, Divider, Button } from 'stdf';
 
     const dota = [
         { label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },

demo/src/pages/rate/RateDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Rate Demo -->
 <script>
-    import {Rate, Icon} from '../../../../packages/stdf/components';
+    import {Rate, Icon} from 'stdf';
 
     let value = 2.5;
     const getValueFun = e => {

demo/src/pages/rate/RateDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Rate Demo -->
 <script>
-    import {Rate, Icon} from '../../../../packages/stdf/components';
+    import {Rate, Icon} from 'stdf';
 
     let value = 2.5;
     const getValueFun = e => {

demo/src/pages/skeleton/SkeletonDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Skeleton Demo -->
 <script>
-    import { Skeleton } from '../../../../packages/stdf/components';
+    import { Skeleton } from 'stdf';
 </script>
 
 <div class="p-2">

demo/src/pages/skeleton/SkeletonDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Skeleton Demo -->
 <script>
-    import { Skeleton } from '../../../../packages/stdf/components';
+    import { Skeleton } from 'stdf';
 </script>
 
 <div class="p-2">

demo/src/pages/slider/SliderDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Slider Demo -->
 <script>
-    import { Slider, Icon } from '../../../../packages/stdf/components';
+    import { Slider, Icon } from 'stdf';
 
     let value = 20;
     const onChangeFun = e => {

demo/src/pages/slider/SliderDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Slider Demo -->
 <script>
-    import { Slider, Icon } from '../../../../packages/stdf/components';
+    import { Slider, Icon } from 'stdf';
 
     let value = 20;
     const onChangeFun = e => {

demo/src/pages/steps/StepsDemo.svelte

@@ -1,6 +1,6 @@
 <!--Steps Demo -->
 <script>
-    import { Steps, Button, Divider } from '../../../../packages/stdf/components';
+    import { Steps, Button, Divider } from 'stdf';
     import injCom1 from './injCom1.svelte';
     import injCom2 from './injCom2.svelte';
 
@@ -274,7 +274,7 @@
 
 <!-- injCom2.svelte -->
 <!-- <script>
-    import { Button, Icon, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Icon, Avatar } from 'stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>

demo/src/pages/steps/StepsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Steps Demo -->
 <script>
-    import { Steps, Button, Divider } from '../../../../packages/stdf/components';
+    import { Steps, Button, Divider } from 'stdf';
     import injCom1 from './injCom1_en.svelte';
     import injCom2 from './injCom2_en.svelte';
 
@@ -277,7 +277,7 @@
 <!-- injCom2.svelte -->
 <!-- 
 <script>
-    import { Button, Icon, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Icon, Avatar } from 'stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>

demo/src/pages/steps/injCom2.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Icon, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Icon, Avatar } from 'stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>

demo/src/pages/steps/injCom2_en.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Icon, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Icon, Avatar } from 'stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>

demo/src/pages/swiper/Item.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/Item_en.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/SwiperDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Swiper Demo -->
 <script>
-    import { Swiper } from '../../../../packages/stdf/components';
+    import { Swiper } from 'stdf';
     import Item from './Item.svelte';
 
     const data = [
@@ -298,7 +298,7 @@
 
 <!-- Item.svelte -->
 <!-- <script>
-    import { Button, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/SwiperDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Swiper Demo -->
 <script>
-    import { Swiper } from '../../../../packages/stdf/components';
+    import { Swiper } from 'stdf';
     import Item from './Item_en.svelte';
 
     const data = [
@@ -299,7 +299,7 @@
 <!-- Item.svelte -->
 <!-- 
 <script>
-    import { Button, Avatar } from '../../../../packages/stdf/components';
+    import { Button, Avatar } from 'stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/switch/SwitchDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Switch Demo -->
 <script>
-    import { Switch, Icon, Cell, Dialog } from '../../../../packages/stdf/components';
+    import { Switch, Icon, Cell, Dialog } from 'stdf';
 
     let checkAsync = false;
     const switchClickFun = () => {

demo/src/pages/switch/SwitchDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Switch Demo -->
 <script>
-    import { Switch, Icon, Cell, Dialog } from '../../../../packages/stdf/components';
+    import { Switch, Icon, Cell, Dialog } from 'stdf';
 
     let checkAsync = false;
     const switchClickFun = () => {

demo/src/pages/tabBar/TabBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- TabBar Demo -->
 <script>
-    import {TabBar} from '../../../../packages/stdf/components';
+    import {TabBar} from 'stdf';
 
     const labels = [
         {text: '首页', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},

demo/src/pages/tabBar/TabBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- TabBar Demo -->
 <script>
-    import {TabBar} from '../../../../packages/stdf/components';
+    import {TabBar} from 'stdf';
 
     const labels = [
         {text: 'Home', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},

demo/src/pages/tabs/TabsDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Tabs Demo -->
 <script>
-    import { Tabs, Tab, TabContent, Divider } from '../../../../packages/stdf/components';
+    import { Tabs, Tab, TabContent, Divider } from 'stdf';
     import { fly } from 'svelte/transition';
 
     const labels = [{ text: '飞机' }, { text: '轮船' }, { text: '火车' }, { text: '汽车' }];

demo/src/pages/tabs/TabsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Tabs Demo -->
 <script>
-    import { Tabs, Tab, TabContent, Divider } from '../../../../packages/stdf/components';
+    import { Tabs, Tab, TabContent, Divider } from 'stdf';
     import { fly } from 'svelte/transition';
 
     const labels = [{ text: 'aircraft' }, { text: 'steamer' }, { text: 'train' }, { text: 'car' }];

demo/src/pages/timePicker/TimePickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- TimePickerDemo Demo -->
 <script>
-    import { Cell, TimePicker } from '../../../../packages/stdf/components';
+    import { Cell, TimePicker } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/timePicker/TimePickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- TimePickerDemo Demo -->
 <script>
-    import { Cell, TimePicker } from '../../../../packages/stdf/components';
+    import { Cell, TimePicker } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/toast/ToastDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Toast Demo -->
 <script>
-    import { Toast, Cell, Button, Loading } from '../../../../packages/stdf/components';
+    import { Toast, Cell, Button, Loading } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/toast/ToastDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Toast Demo -->
 <script>
-    import { Toast, Cell, Button, Loading } from '../../../../packages/stdf/components';
+    import { Toast, Cell, Button, Loading } from 'stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/z/Z copy.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Swiper, Cell, Steps } from '../../../../packages/stdf/components';
+    import { Swiper, Cell, Steps } from 'stdf';
 
     const imgs = [
         { type: 'img', url: './assets/images/wall_1.jpg' },

demo/src/pages/z/Z.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Swiper, Cell, Button, Progress, Divider } from '../../../../packages/stdf/components';
+    import { Swiper, Cell, Button, Progress, Divider } from 'stdf';
 
     const imgs = [
         { type: 'img', url: './assets/images/wall_1.jpg' },

demo/vite.config.js

@@ -1,11 +1,30 @@
 import postcss from './postcss.config.cjs';
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import svgSprite from 'rollup-plugin-stdf-icon';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     base: './',
-    plugins: [svelte()],
+    plugins: [
+        svelte({
+            onwarn(warning, defaultHandler) {
+                const ignoredWarnings = [
+                    'a11y-distracting-elements',
+                    'a11y-no-static-element-interactions',
+                    'a11y-click-events-have-key-events',
+                    'a11y-no-noninteractive-element-interactions',
+                ];
+                const { code } = warning;
+                // don't warn on <marquee> elements, cos they're cool
+                if (ignoredWarnings.includes(code)) return;
+
+                // handle all other warnings normally
+                defaultHandler(warning);
+            },
+        }),
+        svgSprite(),
+    ],
     css: { postcss },
     server: {
         hmr: true,