Icons in properties panel

Developers
1

Hi,

I used webpack to put the properties panel in my app but I’m not seeing the icons in the properties panel, what can be hapening? I attatched the print- screen so you can see

Selec%C3%A7%C3%A3o_002

tanks

2

You seem to miss the icon font. How do you include the styles for the properties panel? Have you had a look at this example.

3

Hi Philipp

Iusualy use javascripts and CSS the old way, this was my first time using webpack for bundle. because css did not came I add it by hand. I tried toupload the files so you can see but here is not possible does not allow this extensions.
The icons are working for the rest of the diagrams are they different fonts?
tanks

4

Hi guys I just used webpack to solve the problem I created a index.js file with this contents and I got the css and js I needed

#index.js

import './style.css';
import "../node_modules/diagram-js/assets/diagram-js.css";
import "../node_modules/bpmn-font/dist/css/bpmn-embedded.css";
import '../node_modules/bpmn-js-properties-panel/styles/properties.less';
import BpmnModeler from 'bpmn-js/lib/Modeler';
window.BpmnModeler = BpmnModeler;
import propertiesPanelModule from 'bpmn-js-properties-panel';
window.propertiesPanelModule = propertiesPanelModule;
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
window.propertiesProviderModule = propertiesProviderModule;
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
window.camundaModdleDescriptor = camundaModdleDescriptor;
import {
  debounce
} from 'min-dash';
window.debounce = debounce;
import diagramXML from '../resources/newDiagram.bpmn';
window.diagramXML = diagramXML;

my webpack config file is this:

// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//const CleanWebpackPlugin = require('clean-webpack-plugin');

//filename: '[name].[chunkhash].js'

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      //{
      //  test: /(\.css$)/,
      //  loaders: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
      //},
      {
        test: /\.(less|css)$/,
         use: [
           'css-hot-loader',
           MiniCssExtractPlugin.loader,
           'css-loader',
           'less-loader'
          ]
      },
      {
        test: /\.scss$/,//.s[a|c]ss$   use
        loaders:  [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader' ]
      },
      //{
      //  test: /\.less$/,
      //  loader: 'less-loader' // compiles Less to CSS
      //},
      {
        test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg|bpmn)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: [
    //new CleanWebpackPlugin('public', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    //new WebpackMd5Hash()
    //filename: 'style.[contenthash].css',
  ]
};

I hope this helps