@myissue/vue-website-page-builder 3.0.19 → 3.0.21

package/README.md

@@ -16,6 +16,20 @@ A Vue 3 page builder component with drag & drop functionality for creating dynam
 npm install @myissue/vue-website-page-builder
 ```
 
+### Important: CSS Import Required
+
+The page builder requires its CSS file to be imported for proper styling and automatic icon loading:
+
+```js
+import '@myissue/vue-website-page-builder/style.css'
+```
+
+This import automatically includes:
+
+- ✅ Page builder styles
+- ✅ Google Material Icons (no additional setup needed)
+- ✅ Responsive design utilities
+
 ## Click & Drop Page Builder
 
 [Play around with the page builder](https://www.builder-demo.myissue.dk)
@@ -107,6 +121,8 @@ import '@myissue/vue-website-page-builder/style.css'
 </template>
 ```
 
+> **📝 Note**: Google Material Icons are automatically loaded when you import the CSS file. No additional setup required for icons!
+
 ### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
@@ -135,7 +151,7 @@ import SearchComponent from './ComponentsPageBuilder/SearchComponent.vue'
 
 You can display your company logo in the page builder interface by passing a logo URL to the `PageBuilderLogo` prop. When provided, the logo will appear in the top toolbar of the page builder.
 
-#### Basic Usage
+Basic Usage:
 
 ```vue
 <script setup>
@@ -148,7 +164,7 @@ import '@myissue/vue-website-page-builder/style.css'
 </template>
 ```
 
-#### Configuration Options
+configuration Options
 
 | Prop              | Type     | Default | Description                         |
 | ----------------- | -------- | ------- | ----------------------------------- |
@@ -156,22 +172,33 @@ import '@myissue/vue-website-page-builder/style.css'
 
 #### Examples
 
-**With company logo:**
+The logo will be displayed with a subtle border separator and proper spacing in the page builder toolbar.
 
-```vue
-<PageBuilder PageBuilderLogo="/logo/square-logo.svg" />
-```
+## Troubleshooting
 
-```
+### Icons Not Displaying
 
-#### Logo Requirements
+If Material Icons are not displaying correctly, verify that:
 
-- **Format**: SVG, PNG, or JPG recommended
-- **Size**: Optimized for 24px height (width will scale proportionally)
-- **Path**: Can be absolute URL, relative path, or imported asset
-- **Accessibility**: Include appropriate alt text (automatically set to "Logo")
+1. **CSS Import**: Ensure you're importing the CSS file:
 
-The logo will be displayed with a subtle border separator and proper spacing in the page builder toolbar.
+   ```js
+   import '@myissue/vue-website-page-builder/style.css'
+   ```
+
+2. **Network Access**: The package loads icons from Google Fonts CDN. Ensure your application can access:
+
+   ```
+   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
+   ```
+
+3. **Content Security Policy**: If using CSP, allow Google Fonts:
+   ```html
+   <meta
+     http-equiv="Content-Security-Policy"
+     content="font-src 'self' https://fonts.googleapis.com;"
+   />
+   ```
 
 ## Contributing
 
@@ -184,4 +211,3 @@ The logo will be displayed with a subtle border separator and proper spacing in
 ## License
 
 [MIT License](./LICENSE)
-```