comit

-import AvatarGroup from './avatar-group';
-import ButtonFav from './button-fav';
-import ButtonLike from './button-like';
-import ButtonShare from './button-share';
-import ButtonTopic from './button-topic';
-import ButtonAvatar from './button-avatar';
+import WidgetAvatarGroup from './widget-avatar-group';
+import WidgetFav from './widget-fav';
+import WidgetLike from './widget-like';
+import WidgetShare from './widget-share';
+import WidgetTopic from './widget-topic';
+import WidgetAvatar from './widget-avatar';
 
 export default [
-  AvatarGroup,
-  ButtonFav,
-  ButtonLike,
-  ButtonShare,
-  ButtonTopic,
-  ButtonAvatar
+  WidgetAvatarGroup,
+  WidgetFav,
+  WidgetLike,
+  WidgetShare,
+  WidgetTopic,
+  WidgetAvatar
 ];

@@ -13,7 +13,7 @@
 
 <script>
   export default {
-    name: 'AvatarGroup',
+    name: 'WidgetAvatarGroup',
     props: {
       avatars: Array,
       option: {

 <template>
-  <ImageFormat class="img-avatar" :style="avatarStyle" :src="src" :width="width" :height="height"></ImageFormat>
+  <ImageFormat class="img-avatar" :src="src" :width="width" :height="height"></ImageFormat>
 </template>
 
 <script>
 export default {
-  name: 'ButtonAvatar',
+  name: 'WidgetAvatar',
   props: {
     src: {
       type: String,
@@ -20,12 +20,6 @@ export default {
     }
   },
   computed: {
-    avatarStyle() {
-      return {
-        width: `${this.width}px`,
-        height: `${this.height}px`,
-      };
-    }
   }
 };
 </script>

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ButtonFav'
+  name: 'WidgetFav'
 };
 </script>

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ButtonLike'
+  name: 'WidgetLike'
 };
 </script>

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ButtonShare'
+  name: 'WidgetShare'
 };
 </script>

@@ -4,6 +4,6 @@
 
 <script>
 export default {
-  name: 'ButtonTopic'
+  name: 'WidgetTopic'
 };
 </script>